/* ==========================================
   WOOPZE UTILITY CLASSES
   Bootstrap-style utility sınıfları
   ========================================== */

/* ==========================================
   MARGIN UTILITIES
   ========================================== */

/* Margin All */
.m-0 { margin: 0 !important; }
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-15 { margin: 15px !important; }
.m-20 { margin: 20px !important; }
.m-25 { margin: 25px !important; }
.m-30 { margin: 30px !important; }
.m-40 { margin: 40px !important; }
.m-50 { margin: 50px !important; }
.m-auto { margin: auto !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-auto { margin-top: auto !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin Left */
.ml-0 { margin-left: 0 !important; }
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-15 { margin-left: 15px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-25 { margin-left: 25px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-50 { margin-left: 50px !important; }
.ml-auto { margin-left: auto !important; }

/* Margin Right */
.mr-0 { margin-right: 0 !important; }
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-15 { margin-right: 15px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-25 { margin-right: 25px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }
.mr-50 { margin-right: 50px !important; }
.mr-auto { margin-right: auto !important; }

/* Margin X (Left + Right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-5 { margin-left: 5px !important; margin-right: 5px !important; }
.mx-10 { margin-left: 10px !important; margin-right: 10px !important; }
.mx-15 { margin-left: 15px !important; margin-right: 15px !important; }
.mx-20 { margin-left: 20px !important; margin-right: 20px !important; }
.mx-30 { margin-left: 30px !important; margin-right: 30px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y (Top + Bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-5 { margin-top: 5px !important; margin-bottom: 5px !important; }
.my-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ==========================================
   PADDING UTILITIES
   ========================================== */

/* Padding All */
.p-0 { padding: 0 !important; }
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.p-20 { padding: 20px !important; }
.p-25 { padding: 25px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }
.p-50 { padding: 50px !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-25 { padding-top: 25px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-25 { padding-bottom: 25px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-50 { padding-bottom: 50px !important; }

/* Padding Left */
.pl-0 { padding-left: 0 !important; }
.pl-5 { padding-left: 5px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-25 { padding-left: 25px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-50 { padding-left: 50px !important; }

/* Padding Right */
.pr-0 { padding-right: 0 !important; }
.pr-5 { padding-right: 5px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-15 { padding-right: 15px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-25 { padding-right: 25px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-50 { padding-right: 50px !important; }

/* Padding X (Left + Right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-5 { padding-left: 5px !important; padding-right: 5px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.px-15 { padding-left: 15px !important; padding-right: 15px !important; }
.px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.px-30 { padding-left: 30px !important; padding-right: 30px !important; }

/* Padding Y (Top + Bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-5 { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* ==========================================
   GAP UTILITIES (Flexbox/Grid)
   ========================================== */
.gap-0 { gap: 0 !important; }
.gap-5 { gap: 5px !important; }
.gap-10 { gap: 10px !important; }
.gap-15 { gap: 15px !important; }
.gap-20 { gap: 20px !important; }
.gap-30 { gap: 30px !important; }

/* ==========================================
   WIDTH UTILITIES
   ========================================== */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.w-50px { width: 50px !important; }
.w-100px { width: 100px !important; }
.w-150px { width: 150px !important; }
.w-200px { width: 200px !important; }
.w-250px { width: 250px !important; }
.w-300px { width: 300px !important; }

.min-w-0 { min-width: 0 !important; }
.min-w-100 { min-width: 100% !important; }
.max-w-100 { max-width: 100% !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-800 { max-width: 800px !important; }

/* ==========================================
   HEIGHT UTILITIES
   ========================================== */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.h-50px { height: 50px !important; }
.h-100px { height: 100px !important; }
.h-150px { height: 150px !important; }
.h-200px { height: 200px !important; }

.min-h-100 { min-height: 100% !important; }
.min-h-100vh { min-height: 100vh !important; }

/* ==========================================
   DISPLAY UTILITIES
   ========================================== */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }

/* ==========================================
   FLEXBOX UTILITIES
   ========================================== */

/* Flex Direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify Content */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align Items */
.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch { align-items: stretch !important; }

/* Align Self */
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-stretch { align-self: stretch !important; }

/* Flex Grow/Shrink */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-1 { flex: 1 !important; }
.flex-auto { flex: auto !important; }
.flex-none { flex: none !important; }

/* ==========================================
   TEXT UTILITIES
   ========================================== */

/* Text Align */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Font Weight */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Font Size */
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-24 { font-size: 24px !important; }
.fs-28 { font-size: 28px !important; }
.fs-32 { font-size: 32px !important; }

/* Text Transform */
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-none { text-transform: none !important; }

/* Text Decoration */
.text-decoration-none { text-decoration: none !important; }
.text-underline { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }

/* Text Overflow */
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.text-break { word-break: break-word !important; }
.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }

/* Line Height */
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 2 !important; }

/* ==========================================
   TEXT COLORS
   ========================================== */
.text-primary { color: #3b82f6 !important; }
.text-secondary { color: #64748b !important; }
.text-success { color: #22c55e !important; }
.text-danger { color: #ef4444 !important; }
.text-warning { color: #f59e0b !important; }
.text-info { color: #0ea5e9 !important; }
.text-dark { color: #1e293b !important; }
.text-muted { color: #94a3b8 !important; }
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }

/* ==========================================
   BACKGROUND COLORS
   ========================================== */
.bg-primary { background-color: #3b82f6 !important; }
.bg-secondary { background-color: #64748b !important; }
.bg-success { background-color: #22c55e !important; }
.bg-danger { background-color: #ef4444 !important; }
.bg-warning { background-color: #f59e0b !important; }
.bg-info { background-color: #0ea5e9 !important; }
.bg-dark { background-color: #1e293b !important; }
.bg-light { background-color: #f8fafc !important; }
.bg-white { background-color: #ffffff !important; }
.bg-transparent { background-color: transparent !important; }

/* Light variants */
.bg-primary-light { background-color: #eff6ff !important; }
.bg-success-light { background-color: #f0fdf4 !important; }
.bg-danger-light { background-color: #fef2f2 !important; }
.bg-warning-light { background-color: #fffbeb !important; }
.bg-info-light { background-color: #f0f9ff !important; }

/* ==========================================
   BORDER UTILITIES
   ========================================== */

/* Border */
.border { border: 1px solid #e2e8f0 !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid #e2e8f0 !important; }
.border-bottom { border-bottom: 1px solid #e2e8f0 !important; }
.border-left { border-left: 1px solid #e2e8f0 !important; }
.border-right { border-right: 1px solid #e2e8f0 !important; }

/* Border Color */
.border-primary { border-color: #3b82f6 !important; }
.border-secondary { border-color: #64748b !important; }
.border-success { border-color: #22c55e !important; }
.border-danger { border-color: #ef4444 !important; }
.border-warning { border-color: #f59e0b !important; }
.border-info { border-color: #0ea5e9 !important; }
.border-light { border-color: #e2e8f0 !important; }
.border-dark { border-color: #1e293b !important; }

/* Border Radius */
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded { border-radius: 6px !important; }
.rounded-md { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-full { border-radius: 9999px !important; }
.rounded-circle { border-radius: 50% !important; }

/* ==========================================
   POSITION UTILITIES
   ========================================== */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Position Values */
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.left-0 { left: 0 !important; }
.left-50 { left: 50% !important; }
.left-100 { left: 100% !important; }
.right-0 { right: 0 !important; }
.right-50 { right: 50% !important; }
.right-100 { right: 100% !important; }

/* Translate Center */
.translate-middle {
    transform: translate(-50%, -50%) !important;
}
.translate-middle-x {
    transform: translateX(-50%) !important;
}
.translate-middle-y {
    transform: translateY(-50%) !important;
}

/* ==========================================
   OVERFLOW UTILITIES
   ========================================== */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* ==========================================
   VISIBILITY UTILITIES
   ========================================== */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ==========================================
   OPACITY UTILITIES
   ========================================== */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ==========================================
   Z-INDEX UTILITIES
   ========================================== */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }
.z-999 { z-index: 999 !important; }
.z-9999 { z-index: 9999 !important; }

/* ==========================================
   SHADOW UTILITIES
   ========================================== */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; }

/* ==========================================
   CURSOR UTILITIES
   ========================================== */
.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }

/* ==========================================
   USER SELECT UTILITIES
   ========================================== */
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

/* ==========================================
   POINTER EVENTS UTILITIES
   ========================================== */
.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }

/* ==========================================
   GRID UTILITIES
   ========================================== */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* Column Span */
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

/* ==========================================
   ASPECT RATIO
   ========================================== */
.aspect-auto { aspect-ratio: auto !important; }
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }

/* ==========================================
   OBJECT FIT
   ========================================== */
.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }

/* ==========================================
   FLOAT & CLEAR
   ========================================== */
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================
   TRANSITIONS
   ========================================== */
.transition-none { transition: none !important; }
.transition-all { transition: all 150ms ease !important; }
.transition-colors { transition: color, background-color, border-color 150ms ease !important; }
.transition-opacity { transition: opacity 150ms ease !important; }
.transition-transform { transition: transform 150ms ease !important; }

/* ==========================================
   HOVER UTILITIES (use with parent:hover)
   ========================================== */
.hover\:opacity-75:hover { opacity: 0.75 !important; }
.hover\:opacity-100:hover { opacity: 1 !important; }
.hover\:bg-light:hover { background-color: #f8fafc !important; }
.hover\:text-primary:hover { color: #3b82f6 !important; }
.hover\:underline:hover { text-decoration: underline !important; }
.hover\:shadow:hover { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important; }