/*! bahissiteleri.cloud — production stylesheet
    Hand-crafted Tailwind-compatible utility subset + design system.
    License: MIT (project). Last update: 2026-05-18 */

/* ============================================================
   1) DESIGN TOKENS
   ============================================================ */
:root{
  --bg:#ffffff; --bg-soft:#f7f8fb; --bg-card:#ffffff;
  --fg:#0b1220; --fg-muted:#475569; --fg-soft:#64748b;
  --line:#e6e8ee; --line-strong:#cfd4de;
  --brand:#0a66ff; --brand-2:#0050d4; --accent:#16a34a; --warn:#b45309; --danger:#b91c1c;
  --ring: 0 0 0 3px rgb(10 102 255 / .18);
  --shadow-sm: 0 1px 2px rgba(2,8,23,.06);
  --shadow-md: 0 4px 14px rgba(2,8,23,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --bg-soft:#0f172a; --bg-card:#101a2e;
    --fg:#e5ecff; --fg-muted:#a8b3cf; --fg-soft:#8893b1;
    --line:#1f2a44; --line-strong:#2a3759;
    --brand:#5b8cff; --brand-2:#3a72ff; --accent:#22c55e; --warn:#f59e0b; --danger:#f87171;
    --ring: 0 0 0 3px rgb(91 140 255 / .28);
  }
}

/* ============================================================
   2) MINIMAL RESET / BASE (preflight subset)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--line);}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;tab-size:4;line-height:1.5;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-feature-settings:"ss01","cv11";
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;}
p,figure,blockquote,dl,dd{margin:0;}
ul,ol{list-style:none;margin:0;padding:0;}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible{outline:0;box-shadow:var(--ring);border-radius:6px;}
button{font:inherit;color:inherit;background:transparent;cursor:pointer;}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}
table{border-collapse:collapse;border-spacing:0;}
hr{border:0;height:1px;background:var(--line);}
strong{font-weight:700;}
em{font-style:italic;}
:focus-visible{outline:0;box-shadow:var(--ring);border-radius:6px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
}

/* ============================================================
   3) LAYOUT PRIMITIVES (custom)
   ============================================================ */
.container-px{padding-left:1rem;padding-right:1rem;}
@media (min-width:768px){.container-px{padding-left:2rem;padding-right:2rem;}}
.wrap{max-width:1180px;margin-inline:auto;}
.divider{height:1px;background:var(--line);border:0;}

/* ============================================================
   4) DESIGN COMPONENTS (custom)
   ============================================================ */
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .55rem;border:1px solid var(--line-strong);
  border-radius:999px;font-size:.75rem;color:var(--fg-muted);background:var(--bg-soft);
}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:12px;font-weight:600;text-decoration:none;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;will-change:transform;
}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-2);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong);}
.btn-ghost:hover{background:var(--bg-soft);text-decoration:none;}
.btn:focus-visible{outline:0;box-shadow:var(--ring);}

.h-display{font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.h-section{font-weight:800;letter-spacing:-.015em;line-height:1.15;}
.muted{color:var(--fg-muted);}
.grid-bg{
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(10,102,255,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(22,163,74,.10), transparent 60%);
}
.nav-shadow{box-shadow:0 1px 0 var(--line), 0 12px 24px -22px rgba(2,8,23,.18);}
.anchor-target{scroll-margin-top:92px;}
.skip{position:absolute;left:-9999px;top:0;}
.skip:focus{left:1rem;top:1rem;background:var(--brand);color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:100;text-decoration:none;}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;padding:.1rem .35rem;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--bg-soft);}
.legend-dot{width:.5rem;height:.5rem;border-radius:999px;display:inline-block;}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;}
.badge-ok{background:rgb(22 163 74 / .12);color:var(--accent);border:1px solid rgb(22 163 74 / .25);}
.badge-warn{background:rgb(180 83 9 / .12);color:var(--warn);border:1px solid rgb(180 83 9 / .25);}
.badge-bad{background:rgb(185 28 28 / .12);color:var(--danger);border:1px solid rgb(185 28 28 / .25);}

/* Comparison table */
table.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;}
table.compare th, table.compare td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);}
table.compare thead th{background:var(--bg-soft);color:var(--fg-muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;}
table.compare tbody tr:hover{background:var(--bg-soft);}

/* FAQ accordion */
details.faq{border:1px solid var(--line);border-radius:12px;background:var(--bg-card);}
details.faq + details.faq{margin-top:.6rem;}
details.faq > summary{
  list-style:none;cursor:pointer;padding:1rem 1.1rem;
  display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between;font-weight:600;
}
details.faq > summary::-webkit-details-marker{display:none;}
details.faq[open] > summary{border-bottom:1px solid var(--line);}
details.faq .ans{padding:.9rem 1.1rem 1.1rem;color:var(--fg-muted);}
details.faq .chev{transition:transform .2s ease;flex:none;}
details.faq[open] .chev{transform:rotate(180deg);}

/* ============================================================
   5) TYPOGRAPHY UTILITIES
   ============================================================ */
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.text-xs{font-size:.75rem;line-height:1rem;}
.text-sm{font-size:.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-5xl{font-size:3rem;line-height:1.1;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.font-extrabold{font-weight:800;}
.tracking-tight{letter-spacing:-.025em;}
.tracking-wide{letter-spacing:.025em;}
.uppercase{text-transform:uppercase;}

/* ============================================================
   6) DISPLAY / POSITION
   ============================================================ */
.block{display:block;}
.inline-block{display:inline-block;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.grid{display:grid;}
.hidden{display:none;}
.sticky{position:sticky;}
.absolute{position:absolute;}
.relative{position:relative;}
.top-0{top:0;}
.z-40{z-index:40;}

/* Flexbox */
.flex-col{flex-direction:column;}
.flex-row{flex-direction:row;}
.flex-wrap{flex-wrap:wrap;}
.flex-none{flex:none;}
.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.items-end{align-items:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}

/* Gap */
.gap-2{gap:.5rem;}
.gap-3{gap:.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.gap-10{gap:2.5rem;}

/* Grid */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ============================================================
   7) SPACING (margin / padding)
   ============================================================ */
.p-2{padding:.5rem;} .p-3{padding:.75rem;} .p-4{padding:1rem;} .p-5{padding:1.25rem;} .p-6{padding:1.5rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.pt-4{padding-top:1rem;} .pt-10{padding-top:2.5rem;}
.pb-12{padding-bottom:3rem;}
.pl-5{padding-left:1.25rem;}
.m-0{margin:0;}
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;} .mt-6{margin-top:1.5rem;} .mt-7{margin-top:1.75rem;} .mt-8{margin-top:2rem;} .mt-10{margin-top:2.5rem;}
.mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;} .mb-4{margin-bottom:1rem;}
.my-4{margin-top:1rem;margin-bottom:1rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.ml-auto{margin-left:auto;}

/* Vertical/horizontal rhythm */
.space-y-2 > * + *{margin-top:.5rem;}
.space-y-3 > * + *{margin-top:.75rem;}

/* ============================================================
   8) SIZING
   ============================================================ */
.w-2{width:.5rem;} .w-8{width:2rem;} .w-9{width:2.25rem;} .w-full{width:100%;}
.h-2{height:.5rem;} .h-8{height:2rem;} .h-9{height:2.25rem;} .h-16{height:4rem;}
.max-w-md{max-width:28rem;}
.max-w-2xl{max-width:42rem;}
.max-w-3xl{max-width:48rem;}

/* ============================================================
   9) BORDERS & RADIUS
   ============================================================ */
.border{border-width:1px;}
.border-t{border-top-width:1px;}
.border-l-4{border-left-width:4px;}
.rounded-lg{border-radius:.5rem;}
.rounded-full{border-radius:9999px;}

/* ============================================================
   10) BACKGROUND / EFFECTS
   ============================================================ */
.bg-white\/70{background-color:rgb(255 255 255 / .7);}
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.overflow-x-auto{overflow-x:auto;}

/* Custom: hover utilities */
.hover\:opacity-80:hover{opacity:.8;}

/* List styles */
.list-decimal{list-style-type:decimal;}

/* ============================================================
   11) RESPONSIVE — sm (>=640px)
   ============================================================ */
@media (min-width:640px){
  .sm\:block{display:block;}
  .sm\:inline-flex{display:inline-flex;}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
}

/* ============================================================
   12) RESPONSIVE — md (>=768px)
   ============================================================ */
@media (min-width:768px){
  .md\:flex-row{flex-direction:row;}
  .md\:items-end{align-items:flex-end;}
  .md\:justify-between{justify-content:space-between;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:p-6{padding:1.5rem;}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem;}
  .md\:pt-16{padding-top:4rem;}
  .md\:pb-20{padding-bottom:5rem;}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
  .md\:text-5xl{font-size:3rem;line-height:1.1;}
}

/* ============================================================
   13) RESPONSIVE — lg (>=1024px)
   ============================================================ */
@media (min-width:1024px){
  .lg\:hidden{display:none;}
  .lg\:flex{display:flex;}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
  .lg\:col-span-3{grid-column:span 3 / span 3;}
  .lg\:col-span-4{grid-column:span 4 / span 4;}
  .lg\:col-span-5{grid-column:span 5 / span 5;}
  .lg\:col-span-7{grid-column:span 7 / span 7;}
  .lg\:text-\[3\.25rem\]{font-size:3.25rem;line-height:1.05;}
}

/* ============================================================
   14) CONDITIONAL FEATURES — backdrop-filter
   ============================================================ */
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .supports-\[backdrop-filter\]\:bg-white\/70{background-color:rgb(255 255 255 / .7);}
}
@media (prefers-color-scheme: dark){
  @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
    .dark\:supports-\[backdrop-filter\]\:bg-slate-900\/60{background-color:rgb(15 23 42 / .6);}
  }
}

/* ============================================================
   15) PRINT
   ============================================================ */
@media print{
  header, footer, .skip, .btn, nav, #mobile-nav{display:none!important;}
  body{background:#fff;color:#000;}
  a{text-decoration:underline;color:#000;}
  .card{border:1px solid #999;break-inside:avoid;}
  details.faq{break-inside:avoid;}
}