:root { 
    --bs-primary:#007bff;
    --bs-secondary:#6c757d;
    --bs-success:#28a745;
    --bs-danger:#dc3545;
    --bs-light:#F5F5F5; 
    --bs-dark:#343a40;
    --bs-white:#ffffff;
    --bs-black:#000000;  
    --bs-ice:#CED6E5;
    --bs-midnight:#232f3E;
    --bs-gold:#FFB700;
    --bs-silver:#C0C0C0;
    --bs-custom:#883BAF;
    --bs-custom-light:#ECD9f6;
    --bs-custom-dark:#4B1A6E;
    
    --gutter-x: 1.5rem;
    --gutter-y: 1.5rem;
    --transition-all:all 0.3s ease-in-out;
    --box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
    --border-radius:0.375rem 
}

* { box-sizing:border-box }
body { margin:0; padding:0; font-family:'Poppins', sans-serif; font-size:1rem; font-weight:400; line-height:1.5; color:var(--bs-dark) }
a { text-decoration:none; color:inherit; transition:color 0.3s ease-in-out }


/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {width:10px }
::-webkit-scrollbar-track {background:#F5F5FA }
::-webkit-scrollbar-thumb {background-color: var(--bs-custom); border-radius:5px;}
::-webkit-scrollbar-thumb:hover {background-color:color-mix(in srgb,var(--bs-custom)85%,white);}


/* ========== SELECTİON ========== */
::selection {background-color:var(--bs-custom); color:#FFF;}


/* ========== BAŞLIKLAR ========== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top:0; margin-bottom:0.5rem; font-weight:500; line-height:1.2 }
h1, .h1 { font-size:calc(1.375rem + 1.20vw) }
h2, .h2 { font-size:calc(1.325rem + 0.9vw) }
h3, .h3 { font-size:calc(1.3rem + 0.6vw) }
h4, .h4 { font-size:calc(1.275rem + 0.3vw) }
h5, .h5 { font-size:1.20rem }
h6, .h6 { font-size:1.10rem }


/* ========== PARAGRAF VE YAZI ETİKETLERİ ========== */
p, span, li {font-size:1rem; color:var(--text-dark)} 
p, .p { margin-top:0; margin-bottom:1rem }
.fw-light { font-weight:300 !important }
.fw-normal { font-weight:400 !important }
.fw-bold { font-weight:700 !important }

.text-start { text-align:left!important }
.text-end { text-align:right!important }
.text-center { text-align:center!important }

.text-lowercase { text-transform:lowercase!important }
.text-uppercase { text-transform:uppercase!important }
.text-capitalize { text-transform:capitalize!important }

.text-wrap { text-wrap:wrap!important; white-space:normal !important }


/* ========== RENKLER ========== */
.text-primary { color:var(--bs-primary)!important }
.text-secondary { color:var(--bs-secondary)!important }
.text-success { color:var(--bs-success)!important }
.text-danger { color:var(--bs-danger)!important }
.text-light { color:var(--bs-light)!important }
.text-dark { color:var(--bs-dark)!important }
.text-white { color:var(--bs-white)!important }
.text-black { color:var(--bs-black)!important }
.text-ice { color:var(--bs-ice)!important }
.text-midnight { color:var(--bs-midnight)!important }
.text-gold { color:var(--bs-gold)!important }
.text-silver { color:var(--bs-silver)!important }
.text-custom { color:var(--bs-custom)!important }
.text-muted { color:var(--bs-secondary)!important }

.bg-primary { background-color:var(--bs-primary)!important }
.bg-secondary { background-color:var(--bs-secondary)!important }
.bg-success { background-color:var(--bs-success)!important }
.bg-danger { background-color:var(--bs-danger)!important }
.bg-light { background-color:var(--bs-light)!important }
.bg-dark { background-color:var(--bs-dark)!important }
.bg-white { background-color:var(--bs-white)!important }
.bg-black { background-color:var(--bs-black)!important }
.bg-ice { background-color:var(--bs-ice)!important }
.bg-midnight { background-color:var(--bs-midnight)!important }
.bg-gold { background-color:var(--bs-gold)!important }
.bg-silver { background-color:var(--bs-silver)!important }
.bg-custom { background-color:var(--bs-custom)!important }
.bg-custom-light { background-color:var(--bs-custom-light)!important }
.bg-custom-dark { background-color:var(--bs-custom-dark)!important }
.bg-gradient {background:linear-gradient(145deg, #6a82fb, #fc5c7d)!important }


/* ========== GÖLGELER ========== */
.shadow { box-shadow: var(--box-shadow) !important }
.shadow-sm { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important }
.shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important }
.shadow-none { box-shadow: none !important }
.shadow-hover:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; transition: box-shadow 0.3s ease }


/* ========== BORDERLAR ========== */
.border { border:1px solid #dee2e6!important }
.border-light { border: 1px solid var(--bs-light) !important }
.border-dark { border: 1px solid var(--bs-dark) !important }
.border-top { border-top:1px solid #dee2e6!important }
.border-end { border-right:1px solid #dee2e6!important }
.border-bottom { border-bottom:1px solid #dee2e6!important }
.border-start { border-left:1px solid #dee2e6!important }
.border-0 { border:0!important }
.border-top-0 { border-top:0!important }
.border-end-0 { border-right:0!important }
.border-bottom-0 { border-bottom:0!important }
.border-start-0 { border-left:0!important }


/* ========== BORDER RADİUSLAR ========== */
.rounded { border-radius:var(--border-radius)!important }
.rounded-0 { border-radius:0!important }
.rounded-1 { border-radius:0.2rem!important }
.rounded-2 { border-radius:0.25rem!important }
.rounded-3 { border-radius:0.3rem!important }
.rounded-4 { border-radius:0.375rem!important }
.rounded-5 { border-radius:0.5rem!important }
.rounded-circle { border-radius:50%!important }
.rounded-pill { border-radius:50rem!important }
.rounded-top { border-top-left-radius:0.375rem!important; border-top-right-radius:0.375rem!important }
.rounded-end { border-top-right-radius:0.375rem!important; border-bottom-right-radius:0.375rem!important }
.rounded-bottom { border-bottom-right-radius:0.375rem!important; border-bottom-left-radius:0.375rem!important }
.rounded-start { border-top-left-radius:0.375rem!important; border-bottom-left-radius:0.375rem!important }


/* ========== RESPONSİVE RESİMLER ========== */
.img-fluid { max-width:100%; height:auto }


/* ========== MARGIN & PADDING ========== */
.m-0 { margin:0 !important }
.mt-0 { margin-top:0 !important }
.me-0 { margin-right:0 !important }
.mb-0 { margin-bottom:0 !important }
.ms-0 { margin-left:0 !important }

.m-1 { margin:0.25rem !important }
.mt-1 { margin-top:0.25rem !important }
.me-1 { margin-right:0.25rem !important }
.mb-1 { margin-bottom:0.25rem !important }
.ms-1 { margin-left:0.25rem !important }

.m-2 { margin:0.5rem !important }
.mt-2 { margin-top:0.5rem !important }
.me-2 { margin-right:0.5rem !important }
.mb-2 { margin-bottom:0.5rem !important }
.ms-2 { margin-left:0.5rem !important }

.m-3 { margin:1rem !important }
.mt-3 { margin-top:1rem !important }
.me-3 { margin-right:1rem !important }
.mb-3 { margin-bottom:1rem !important }
.ms-3 { margin-left:1rem !important }

.m-4 { margin:1.5rem !important }
.mt-4 { margin-top:1.5rem !important }
.me-4 { margin-right:1.5rem !important }
.mb-4 { margin-bottom:1.5rem !important }
.ms-4 { margin-left:1.5rem !important }

.m-5 { margin:3rem !important }
.mt-5 { margin-top:3rem !important }
.me-5 { margin-right:3rem !important }
.mb-5 { margin-bottom:3rem !important }
.ms-5 { margin-left:3rem !important }

.mx-auto { margin:0 auto !important }
.my-auto { margin:auto 0 !important }

.p-0 { padding:0 !important }
.pt-0 { padding-top:0 !important }
.pe-0 { padding-right:0 !important }
.pb-0 { padding-bottom:0 !important }
.ps-0 { padding-left:0 !important }

.p-1 { padding:0.25rem !important }
.pt-1 { padding-top:0.25rem !important }
.pe-1 { padding-right:0.25rem !important }
.pb-1 { padding-bottom:0.25rem !important }
.ps-1 { padding-left:0.25rem !important }

.p-2 { padding:0.5rem !important }
.pt-2 { padding-top:0.5rem !important }
.pe-2 { padding-right:0.5rem !important }
.pb-2 { padding-bottom:0.5rem !important }
.ps-2 { padding-left:0.5rem !important }

.p-3 { padding:1rem !important }
.pt-3 { padding-top:1rem !important }
.pe-3 { padding-right:1rem !important }
.pb-3 { padding-bottom:1rem !important }
.ps-3 { padding-left:1rem !important }

.p-4 { padding:1.5rem !important }
.pt-4 { padding-top:1.5rem !important }
.pe-4 { padding-right:1.5rem !important }
.pb-4 { padding-bottom:1.5rem !important }
.ps-4 { padding-left:1.5rem !important }

.p-5 { padding:3rem !important }
.pt-5 { padding-top:3rem !important }
.pe-5 { padding-right:3rem !important }
.pb-5 { padding-bottom:3rem !important }
.ps-5 { padding-left:3rem !important }


/* ========== DİSPLAY ========== */
.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-grid { display:grid!important }
.d-table { display:table!important }

@media (min-width: 768px) {
.d-md-block { display: block !important }
}

/*(flex-direction) */
.flex-row { flex-direction:row!important }
.flex-column { flex-direction:column!important }
.flex-wrap { flex-wrap:wrap!important }

/*(justify-content) */
.justify-content-start { justify-content:flex-start!important }
.justify-content-end { justify-content:flex-end!important }
.justify-content-center { justify-content:center!important }
.justify-content-between { justify-content:space-between!important }
.justify-content-around { justify-content:space-around!important }

/*(align-items) */
.align-items-start { align-items:flex-start!important }
.align-items-end { align-items:flex-end!important }
.align-items-center { align-items:center!important }
.align-items-baseline { align-items:baseline!important }
.align-items-stretch { align-items:stretch!important }

/* (gap) */
.gap-1 { gap:0.25rem !important }
.gap-2 { gap:0.5rem !important }
.gap-3 { gap:1rem !important }
.gap-4 { gap:1.5rem !important }
.gap-5 { gap:3rem !important }


/* ========== POSİTİON ========== */
.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 }

/*(top/right/bottom/left) */
.top-0 { top:0 !important }
.right-0 { right:0 !important }
.bottom-0 { bottom:0 !important }
.left-0 { left:0 !important }


/* ========== FLOAT HİZALAMALAR ========== */
.float-start { float:left!important }
.float-center { float:center!important }
.float-end { float:right!important }


/* ========== WİDTH VE HEİGHT ========== */
.w-25 { width:25% !important }
.w-50 { width:50% !important }
.w-75 { width:75% !important }
.w-100 { width:100% !important }
.h-25 { height:25% !important }
.h-50 { height:50% !important }
.h-75 { height:75% !important }
.h-100 { height:100% !important }


/* ========== İKONLAR ========== */
.icon-sm { font-size: 20px; }
.icon-md { font-size: 28px; }
.icon-lg { font-size: 32px; }


/* ========== Z-INDEX ========== */
.z-index-0 { z-index:0 !important }
.z-index-1 { z-index:1 !important }
.z-index-2 { z-index:2 !important }
.z-index-3 { z-index:3 !important }
.z-index-4 { z-index:4 !important }
.z-index-5 { z-index:5 !important }


/* ========== GRİD ========== */
.container { width:90%; margin:0 auto  }
.row { display:flex; flex-wrap:wrap;  margin-right:calc(-1 * var(--gutter-x)); margin-left:calc(-1 * var(--gutter-x)); row-gap:var(--gutter-y) }
.row > [class*='col'] { padding-right:var(--gutter-x); padding-left:var(--gutter-x) }
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
.col-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, 
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto { position:relative; width:100% }
.col { flex-basis:0; flex-grow:1; max-width:100% }
.col-auto { flex:0 0 auto; width:auto; max-width:100% }

.col-1 { flex:0 0 8.333333%; max-width:8.333333% }
.col-2 { flex:0 0 16.666667%; max-width:16.666667% }
.col-3 { flex:0 0 25%; max-width:25% }
.col-4 { flex:0 0 33.333333%; max-width:33.333333% }
.col-5 { flex:0 0 41.666667%; max-width:41.666667% }
.col-6 { flex:0 0 50%; max-width:50% }
.col-7 { flex:0 0 58.333333%; max-width:58.333333% }
.col-8 { flex:0 0 66.666667%; max-width:66.666667% }
.col-9 { flex:0 0 75%; max-width:75% }
.col-10 { flex:0 0 83.333333%; max-width:83.333333% }
.col-11 { flex:0 0 91.666667%; max-width:91.666667% }
.col-12 { flex:0 0 100%; max-width:100% }

.g-0  { --gutter-x:0;     --gutter-y:0 }
.g-1  { --gutter-x:0.25rem; --gutter-y:0.25rem }
.g-2  { --gutter-x:0.4rem;  --gutter-y:0.4rem } /* 0.5 olacak ama ben 0.4 yaptım*/
.g-3  { --gutter-x:1rem;    --gutter-y:1rem }
.g-4  { --gutter-x:1.5rem;  --gutter-y:1.5rem }
.g-5  { --gutter-x:3rem;    --gutter-y:3rem }

.gx-0  { --gutter-x:0 }
.gx-1  { --gutter-x:0.25rem }
.gx-2  { --gutter-x:0.5rem }
.gx-3  { --gutter-x:1rem }
.gx-4  { --gutter-x:1.5rem }
.gx-5  { --gutter-x:3rem }

.gy-0  { --gutter-y:0 }
.gy-1  { --gutter-y:0.25rem }
.gy-2  { --gutter-y:0.5rem }
.gy-3  { --gutter-y:1rem }
.gy-4  { --gutter-y:1.5rem }
.gy-5  { --gutter-y:3rem }

@media (min-width:768px) { 
  .col-md { flex-basis:0; flex-grow:1; max-width:100% }
  .col-md-auto { flex:0 0 auto; width:auto; max-width:100% }
  .col-md-1 { flex:0 0 8.333333%; max-width:8.333333% }
  .col-md-2 { flex:0 0 16.666667%; max-width:16.666667% }
  .col-md-3 { flex:0 0 25%; max-width:25% }
  .col-md-4 { flex:0 0 33.333333%; max-width:33.333333% }
  .col-md-5 { flex:0 0 41.666667%; max-width:41.666667% }
  .col-md-6 { flex:0 0 50%; max-width:50% }
  .col-md-7 { flex:0 0 58.333333%; max-width:58.333333% }
  .col-md-8 { flex:0 0 66.666667%; max-width:66.666667% }
  .col-md-9 { flex:0 0 75%; max-width:75% }
  .col-md-10 { flex:0 0 83.333333%; max-width:83.333333% }
  .col-md-11 { flex:0 0 91.666667%; max-width:91.666667% }
  .col-md-12 { flex:0 0 100%; max-width:100% }
  
  .g-md-0 { --gutter-x:0; --gutter-y:0 }
  .g-md-1 { --gutter-x:0.25rem; --gutter-y:0.25rem }
  .g-md-2 { --gutter-x:0.5rem; --gutter-y:0.5rem }
  .g-md-3 { --gutter-x:1rem; --gutter-y:1rem }
  .g-md-4 { --gutter-x:1.5rem; --gutter-y:1.5rem }
  .g-md-5 { --gutter-x:3rem; --gutter-y:3rem }
 }

@media (min-width:992px) { 
  .col-lg { flex-basis:0; flex-grow:1; max-width:100% }
  .col-lg-auto { flex:0 0 auto; width:auto; max-width:100% }
  .col-lg-1 { flex:0 0 8.333333%; max-width:8.333333% }
  .col-lg-2 { flex:0 0 16.666667%; max-width:16.666667% }
  .col-lg-3 { flex:0 0 25%; max-width:25% }
  .col-lg-4 { flex:0 0 33.333333%; max-width:33.333333% }
  .col-lg-5 { flex:0 0 41.666667%; max-width:41.666667% }
  .col-lg-6 { flex:0 0 50%; max-width:50% }
  .col-lg-7 { flex:0 0 58.333333%; max-width:58.333333% }
  .col-lg-8 { flex:0 0 66.666667%; max-width:66.666667% }
  .col-lg-9 { flex:0 0 75%; max-width:75% }
  .col-lg-10 { flex:0 0 83.333333%; max-width:83.333333% }
  .col-lg-11 { flex:0 0 91.666667%; max-width:91.666667% }
  .col-lg-12 { flex:0 0 100%; max-width:100% }
  
  .g-lg-0 { --gutter-x:0; --gutter-y:0 }
  .g-lg-1 { --gutter-x:0.25rem; --gutter-y:0.25rem }
  .g-lg-2 { --gutter-x:0.5rem;  --gutter-y:0.5rem }
  .g-lg-3 { --gutter-x:1rem;    --gutter-y:1rem }
  .g-lg-4 { --gutter-x:1.5rem;  --gutter-y:1.5rem }
  .g-lg-5 { --gutter-x:3rem;    --gutter-y:3rem }
 }


@media (min-width: 768px) { 
  .g-md-0 { --gutter-x: 0; --gutter-y: 0 }
  .g-md-1 { --gutter-x: 0.25rem; --gutter-y: 0.25rem }
  .g-md-2 { --gutter-x: 0.5rem; --gutter-y: 0.5rem }
  .g-md-3 { --gutter-x: 1rem; --gutter-y: 1rem }
  .g-md-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem }
  .g-md-5 { --gutter-x: 3rem; --gutter-y: 3rem }
 }


/* ========== UTİLİTİES ========== */
.transition-all { transition:all 0.3s ease-in-out }
.cursor-pointer { cursor:pointer!important }
.cursor-not-allowed { cursor:not-allowed !important }
.user-select-none { user-select:none !important }
.pointer-events-none { pointer-events:none !important }
.scroll-smooth { scroll-behavior:smooth !important }
.list-unstyled { list-style:none !important; padding-left:0 !important; margin-bottom:0 !important }
.overflow-hidden { overflow: hidden !important }
.visually-hidden {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0 }


/* ========== BUTONLAR ========== */
:root { --btn-padding:0.5rem 1.25rem }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:var(--btn-padding); font-weight:500; line-height:1.5; border-radius:var(--border-radius); cursor:pointer; user-select:none; transition:var(--transition-all); font-size:1rem }

.btn-primary { color:#fff; background-color:var(--bs-primary); border:1px solid transparent }
.btn-primary:hover, .btn-primary:active { background-color:color-mix(in srgb,var(--bs-primary)85%,white);  box-shadow:var(--box-shadow) } 

.btn-secondary { color:#fff; background-color:var(--bs-secondary); border:1px solid transparent }
.btn-secondary:hover, .btn-secondary:active { background-color:color-mix(in srgb,var(--bs-secondary)85%,white);  box-shadow:var(--box-shadow) }

.btn-success { color:#fff; background-color:var(--bs-success); border:1px solid transparent }
.btn-success:hover, .btn-success:active { background-color:color-mix(in srgb,var(--bs-success)85%,white);  box-shadow:var(--box-shadow) }

.btn-danger { color:#fff; background-color:var(--bs-danger); border:1px solid transparent }
.btn-danger:hover, .btn-danger:active { background-color:color-mix(in srgb,var(--bs-danger)85%,white);  box-shadow:var(--box-shadow) }

.btn-light { color:#fff; background-color:var(--bs-light); border:1px solid transparent }
.btn-light:hover, .btn-light:active { background-color:color-mix(in srgb,var(--bs-light)85%,white);  box-shadow:var(--box-shadow) }

.btn-dark { color:#fff; background-color:var(--bs-dark); border:1px solid transparent }
.btn-dark:hover, .btn-dark:active { background-color:color-mix(in srgb,var(--bs-dark)85%,white);  box-shadow:var(--box-shadow) }

.btn-custom { color:#fff; background-color:var(--bs-custom); border:1px solid transparent }
.btn-custom:hover, .btn-custom:active { background-color:color-mix(in srgb,var(--bs-custom)85%,white);  box-shadow:var(--box-shadow) }

.btn-sm { padding:0.25rem 0.5rem; font-size:0.875rem; border-radius:0.2rem }
.btn-lg { padding:0.75rem 1rem; font-size:1.25rem; border-radius:0.3rem }


/* ========== ALERTLER ========== */
.alert { position:relative; padding:0.5rem; margin-bottom:1rem; border:1px solid transparent; border-radius:var(--border-radius) }
.alert-primary { color:#084298; background-color:#cfe2ff; border-color:#b6d4fe }
.alert-secondary { color:#41464b; background-color:#e2e3e5; border-color:#d3d6d8 }
.alert-success { color:#0f5132; background-color:#d1e7dd; border-color:#badbcc }
.alert-danger { color:#842029; background-color:#f8d7da; border-color:#f5c2c7 }
.alert-custom { color:var(--bs-custom-dark); background-color:var(--bs-custom-light); border-color:color-mix(in srgb,var(--bs-custom-light)90%,black) }


/* ========== FORMLAR ========== */
label {font-weight:500; color:var(--text-dark); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea {font-size:1rem; color:var(--text-dark); padding:0.5rem; line-height:1.5; border:1px solid #ddd; border-radius:4px; width:100%; max-width:100%; transition:border-color 0.3s ease-in-out,box-shadow 0.3s ease-in-out; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, select:focus, textarea:focus {outline:none; border-color:var(--bs-custom); box-shadow:0 0 0 2px var(--bs-custom-light), 0 1px 2px var(--bs-custom); transition:var(--transition-all) }
input[type="radio"],input[type="checkbox"]  {transform:scale(1.25); cursor:pointer;}
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23212529' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.75rem center; background-size:16px 12px }


/* ========== TABLOLAR ========== */
.table { width:100%; overflow-x:auto; margin-bottom:1rem; color:var(--bs-dark); vertical-align:top; border-color:#dee2e6; border-spacing:0; border-radius:var(--border-radius) }
.table th, .table td { padding:0.5rem; vertical-align:top; border-top:1px solid #dee2e6 }
.table thead th { vertical-align:bottom; border-bottom:2px solid #dee2e6 }
.table-bordered { border:1px solid #dee2e6 }
.table-bordered th, .table-bordered td { border:1px solid #dee2e6 }
.table-striped tbody tr:nth-of-type(odd) { background-color:rgba(0, 0, 0, 0.05) }


/* ========== CARDLAR ========== */
.card { position:relative; display:flex; flex-direction:column; height:100%; word-wrap:break-word; background-color:#fff; background-clip:border-box; border:0px solid rgba(0, 0, 0, 0.125); border-radius:var(--border-radius)  }
.card-img-top { max-width:100%; height:auto; border-top-left-radius:calc(0.375rem - 1px); border-top-right-radius:calc(0.375rem - 1px); object-fit:cover }
.card-body { flex:1 1 auto; padding:0.25rem }
.card-title { margin-bottom:0.5rem }
.card-text { margin-bottom:0.5rem }
.card-color {width:20px; height:20px; border-radius:50%; border:1px solid grey}


/* ========== SEARCH ========== */
.search-container{display:flex; align-items:center; border-radius:var(--border-radius); overflow:hidden; background-color:var(--bs-custom-light) }
.search-input{flex:1; border:none; color:var(--bs-dark); border-top-right-radius:0; border-bottom-right-radius:0 }
.search-input::-webkit-outer-spin-button, .search-input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
.search-input:focus {border-color:none; outline:0; box-shadow:none}
.search-button{background-color:transparent; color:#000; font-size:20px; padding:0.5rem 1rem; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center}
.search-button:hover{background-color:none;}


/* ========== UNDERLİNE ========== */
.underline-single { display:inline-block; position:relative; margin-bottom:1rem }
.underline-single::after { content:""; display:block; width:70%; height:2px; margin:8px auto 0; background:linear-gradient(90deg,transparent 0%,#999 50%,transparent 100%) }
.underline-double { display:inline-block;position:relative;margin-bottom:1rem; padding-bottom:4px }
.underline-double::before, .underline-double::after { content:""; position:absolute; left:15%; width:70%; height:2px; background:linear-gradient(90deg,transparent 0%,#999 50%,transparent 100%) }
.underline-double::before { bottom:0 }
.underline-double::after { bottom:-4px }
.underline-focus { display:inline-block; position:relative; margin-bottom:1rem }
.underline-focus::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:linear-gradient(90deg,transparent 0%,rgba(153,153,153,0.3) calc(50% - 25px),#999 calc(50% - 25px),#999 calc(50% + 25px),rgba(153,153,153,0.3) calc(50% + 25px),transparent 100%) }


/* ========== TABS ========== */
.tabs { border-radius:var(--border-radius) }
.tab-header { display:flex; justify-content:center; border-bottom:1px solid rgba(0,0,0,0.05)}
.tab-btn { padding:1rem; background-color:transparent; border:none; cursor:pointer; font-size:1rem; font-weight:600; color:var(--bs-secondary); position:relative; margin:0 0.25rem }
.tab-btn.active { color:var(--bs-custom) }
.tab-btn::after { content:''; position:absolute; bottom:0; left:50%; width:0; height:3px; background-color:var(--bs-custom); transform:translateX(-50%); transition:width 0.3s ease-in-out }
.tab-btn.active::after { width:60% }
.tab-content { padding:1rem auto; display:none; animation:fadeInUp 0.3s ease-out; min-height:250px; }
.tab-content.active { display:block }


/* ========== MODAL DİALOG ========== */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(3px) }
.modal-content { background-color:white; border-radius:var(--border-radius); width:90%; max-width:500px; overflow:hidden; animation:fadeInUp 0.3s ease-out }
.modal-header { border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center }
.modal-title { margin:0; font-size:1.5rem; color:#333 }
.btn-close { background-color:transparent; border:none; font-size:2rem; cursor:pointer }
.modal-body { line-height:1.5; color:#555 }
.modal-footer { border-top:1px solid #eee; display:flex; justify-content:flex-end; gap:10px }


/* ========== TOOLTİP ========== */
[data-tooltip] { position:relative; color:white; border:none; border-radius:var(--border-radius); cursor:pointer; font-size:1rem }
[data-tooltip]:hover::before { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background-color:rgba(48, 48, 48, 0.8); color:white; font-size:0.9rem; padding:5px; border-radius:var(--border-radius); width:max-content; max-width:200px }
[data-tooltip]:hover::after { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:rgba(48, 48, 48, 0.8) }


/* ========== ACCORDİON ========== */
.accordion { width:100% }
.accordion-question { display:flex; align-items:center; justify-content:space-between; background-color:var(--bs-ice); color:var(--bs-dark); padding:1rem; margin-bottom:0.5rem; border-radius:var(--border-radius); cursor:pointer; position:relative; user-select:none; }
.accordion-icon { display:flex; align-items:center }
.accordion-icon i { color:var(--bs-dark) }
.accordion-answer { background-color:#fff; padding:1rem; margin-bottom:1rem; border-radius:var(--border-radius); display:none; overflow:hidden }
.accordion-item.expanded .accordion-answer { display:block }
.accordion-item.expanded .accordion-icon { transform:rotate(180deg) }


/* ========== ANİMATİON ========== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
.fade-in-up { opacity:0; transform:translateY(40px); animation:fadeInUp 1s ease-out forwards }


/* ========== HEADER & MENULER ========== */
.header { position:absolute; top:0; left:0; width:100%; background-color:var(--bs-custom-dark) }
.header .marquee {width:100%; overflow:hidden; background-color:var(--bs-gold); z-index:1001}
.header .marquee span {display:inline-block; white-space:nowrap; padding-left:100%; animation:marquee 15s linear infinite; font-size:0.9rem; color:#333; margin:0 auto; line-height:30px}
@keyframes marquee {0% { transform:translateX(0); }100% { transform:translateX(-100%); }}
.header .container { display:flex; align-items:center; justify-content:space-between; height:70px; z-index:1000}
.mobile-header { display:none }
.logo img { height:45px }
.nav { position:relative }
.nav ul { list-style:none; display:flex; gap:1rem; padding:0 }
.nav ul li { position:relative }
.nav ul li a { color:white; text-decoration:none; padding:1.5rem 1rem; display:block; transition:color 0.3s ease; font-size:1rem; font-weight:500}
.nav ul li ul { display:block; opacity:0; visibility:hidden; position:absolute; top:100%; background-color:var(--bs-custom-dark); white-space:nowrap; min-width:185px; max-height:450px; overflow-y:auto; border-radius:0 0 8px 8px; transition:opacity 0.3s ease, max-height 0.4s ease, visibility 0.3s ease; z-index:10; box-sizing:border-box }
.nav ul li ul li a { padding:0.75rem 1rem; font-size:1rem }
.menu-toggle { display:none; font-size:2rem; cursor:pointer; color:white; background:none; border:none }


@media (min-width:769px) { 
	.nav ul li:hover ul { display:block; opacity:1; visibility:visible } 
	.nav ul li a::after { content:''; display:block; width:0; height:2px; background:white; transition:width 0.4s ease; position:absolute; bottom:1.3rem; left:50%; transform:translateX(-50%) }
	.nav ul li a:hover::after { width:80% }
	.nav ul li ul li:hover { background-color:var(--bs-custom) }
	.nav ul li ul li a::after { content:none }
	
	.article-column { column-count:2; column-gap:50px; text-align:justify; column-rule:1px dashed grey }
}


@media (max-width:768px) { 
	.nav { position:fixed; top:0; left:-300px; width:300px; height:100%; transition:left 0.3s ease; z-index:1001; overflow-y:auto; background-color:var(--bs-custom-dark) }
	.nav.active { left:0 }
	.nav ul { flex-direction:column; gap:0; padding:0 5% }
	.nav ul li a { padding:0.75rem 0; border-bottom:1px solid rgba(255, 255, 255, 0.1) }
	.nav ul li ul { padding-right:0; display:none; position:static; margin-left:20px; left:0; background-image:none; max-height:auto; scrollbar-width:none; -ms-overflow-style:none;}
	.nav ul li ul.open { display:block; opacity:1; visibility:visible }
	.menu-toggle { display:block } 
	.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:999 } 
	.overlay.active { display:block } 
	.mobile-header { display:flex; justify-content:space-between; align-items:center; padding:1rem; margin-bottom:20px; height:100px; background-color: rgba(255, 255, 255, 0.05); } 
	.btn-close-menu { font-size:1.5rem; color:#fff; background:none; border:none; cursor:pointer }
	.card-color {width:16px; height:16px; border-radius:50%; border:1px solid grey}
    .card-title { font-size:0.95rem }
}


/* ========== CUSTOM CSS ========== */
.main {margin-top:100px; min-height:calc(100vh - 100px) }

.homepage-hero-section { height:100vh; padding-top:100px; background-image:radial-gradient(circle at 0% 0%,rgba(93, 29, 136, 0.20) 0%, rgba(93, 29, 136, 0) 70% ), url("../images/tisorthane-anasayfa-masaustu.webp"); background-position:top left, bottom right; background-size:contain, contain; background-repeat:no-repeat, no-repeat; display:flex; align-items:center; }
.homepage-hero-content { max-width:600px; color:var(--bs-dark); font-weight:500 }
.homepage-hero-content p { font-size:1.1rem; line-height:1.5 }

.category-link{position:relative; display:block; border-left:4px solid transparent; transition:all 0.3s ease;}
.category-link:hover{background-color:rgba(245,245,245,0.9); border-left-color:var(--bs-custom); transform:translateX(5px); box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.category-link::before{content:''; position:absolute; top:0; left:0; width:0; height:100%; background:linear-gradient(90deg,rgba(93,29,136,0.1),transparent); transition:width 0.3s ease}
.category-link:hover::before{width:100%;}

.blog-detail-subscriber { width:100%; padding:100px 5%; background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.3)),url('../../assets/images/newsletter-background.webp'); background-position:center; background-size:cover; background-attachment:fixed; display:flex; align-items:center; flex-direction:column; justify-content:center }

@media (max-width:768px) { 
.homepage-hero-section { height:calc(94vh); background-image:linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.25)),url('../../assets/images/tisorthane-anasayfa-mobil.webp'); background-size:cover; background-position:center; background-repeat:no-repeat }
.homepage-hero-content { color:var(--bs-white)}
}