:root{
    /* Açık palet — serdark.digital logosundan türetildi */
    --ink:#F4F1EA;          /* sayfa zemini (krem) */
    --ink-2:#FFFFFF;        /* kart yüzeyi */
    --ink-3:#EBE7DD;        /* vurgulu yüzey */
    --line:#DAD3C6;
    --line-soft:#E6E1D6;
    --marka:#3F6B55;        /* logodaki yeşil */
    --marka-soluk:#8AAC99;
    --marka-hafif:rgba(63,107,85,.10);
    --coral:#C4795C;
    --plum:#7A6B96;
    --text:#161616;         /* logodaki siyah */
    --text-dim:#5A5A54;
    --text-faint:#8C8C84;
    --danger:#A8392F;
    --radius:10px;
    --serif:'Fraunces', 'Fraunces Yedek', Georgia, serif;
    --sans:'Inter', -apple-system, "Segoe UI", sans-serif;
  }
  /* Fraunces gelene kadar Georgia çiziliyor ve daha geniş; başlık bir an
     taşabiliyordu. size-adjust ile yedek yazı tipinin ölçüsü Fraunces'a
     yaklaştırılıyor, geçiş sırasında yerleşim oynamıyor. */
  @font-face{
    font-family:'Fraunces Yedek';
    src:local('Georgia'), local('Times New Roman'), local('serif');
    size-adjust:92%;
    ascent-override:95%;
    descent-override:22%;
    line-gap-override:0%;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  .container{ max-width:1080px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }
  a{ color:inherit; }

  /* ---------------- Ambient light show (fixed, behind everything) ---------------- */
  .lights{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  }
  .beam{
    position:absolute;
    width:60vw; height:60vw;
    border-radius:50%;
    filter:blur(90px);
    opacity:.10;
    mix-blend-mode:multiply;
  }
  .beam-1{ background:radial-gradient(circle, var(--marka), transparent 70%); top:-20%; left:-10%; animation:drift1 26s ease-in-out infinite; }
  .beam-2{ background:radial-gradient(circle, var(--coral), transparent 70%); top:30%; right:-15%; animation:drift2 32s ease-in-out infinite; }
  .beam-3{ background:radial-gradient(circle, var(--plum), transparent 70%); bottom:-25%; left:20%; animation:drift3 38s ease-in-out infinite; }
  @keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6vw,8vh) scale(1.15); } }
  @keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-8vw,4vh) scale(1.1); } }
  @keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5vw,-6vh) scale(1.2); } }

  .grain{
    position:fixed; inset:0; z-index:0; opacity:.02; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .particles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .spark{
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:var(--marka-soluk); opacity:0; animation:rise-fall linear infinite;
  }
  @keyframes rise-fall{
    0%{ opacity:0; transform:translateY(0); }
    10%{ opacity:.7; }
    90%{ opacity:.4; }
    100%{ opacity:0; transform:translateY(-100vh); }
  }

  @media (prefers-reduced-motion: reduce){
    .beam, .spark{ animation:none !important; }
  }

  /* ---------------- Nav ---------------- */
  header.nav{ border-bottom:1px solid var(--line-soft); position:relative; z-index:2; }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px; max-width:1080px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  /* 3B logo — serdark.digital */
  .marka-logo{
    text-decoration:none; display:inline-flex; align-items:center;
    perspective:760px; line-height:1;
  }
  .logo-3d{
    display:inline-block;
    font-family:var(--serif); font-weight:600; font-size:24px;
    letter-spacing:-.02em;
    transform-style:preserve-3d;
    transform:rotateY(-7deg) rotateX(4deg);
    animation:logo-salin 12s ease-in-out infinite;
    transition:transform .35s cubic-bezier(.2,.8,.3,1);
  }
  /* Kabartma: yalnızca iki keskin katman + üstte ince ışık.
     Bulanık ve uzun gölgeler 3B değil, odaksız görünüm veriyordu. */
  .logo-3d .siyah{
    color:#141414;
    text-shadow:
      0 -1px 0 rgba(255,255,255,.55),
      1px 1px 0 #a49c8d,
      2px 2px 0 #7e7668;
  }
  .logo-3d .yesil{
    color:var(--marka);
    text-shadow:
      0 -1px 0 rgba(255,255,255,.35),
      1px 1px 0 #2a5140,
      2px 2px 0 #1b3a2b;
  }
  .marka-logo:hover .logo-3d{ transform:rotateY(9deg) rotateX(-3deg) scale(1.04); }
  @keyframes logo-salin{
    0%,100%{ transform:rotateY(-7deg) rotateX(4deg); }
    50%    { transform:rotateY(7deg)  rotateX(-3deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .logo-3d{ animation:none; }
  }
  @media (max-width:640px){
    .logo-3d{ font-size:18px; }
  }
  .nav-links{ display:flex; gap:36px; font-size:14px; color:var(--text-dim); }
  .nav-links a{ text-decoration:none; transition:color .15s ease; }
  .nav-links a:hover{ color:var(--text); }
  .nav-cta{
    font-size:14px; color:#fff; background:var(--marka);
    padding:9px 18px; border-radius:6px; text-decoration:none; font-weight:500;
    transition:transform .15s ease;
  }
  .nav-cta:hover{ transform:translateY(-1px); }

  /* ---------------- Hero ---------------- */
  @keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }


  /* ---------------- Vitrin (akan video duvarı) ---------------- */
  .hero{
    /* Sabit yükseklik: çapraz duvar taşar, fazlası kırpılır */
    height:400px; padding:0;
    overflow:hidden; position:relative;
    display:flex; align-items:center;
  }
  .vitrin{
    position:relative; z-index:1;
    /* Çapraz akış: döndürünce köşelerde boşluk kalmasın diye blok
       genişletilip sola kaydırılıyor, taşan kısmı .hero kırpıyor */
    width:126%; margin-left:-13%;
    transform:rotate(-5.5deg);
    display:flex; flex-direction:column; gap:14px;
    /* Dört kenarda da yumuşak geçiş: üst/alt keskin kesilince
       şerit bantmış gibi duruyordu, sayfaya karışması gerekiyor */
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
      linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image:
      linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
      linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  .vitrin-satir{
    display:flex; gap:16px; width:max-content;
    will-change:transform;
    animation:vitrin-ak linear infinite;
  }
  /* Takım 3 kez basılıyor; bir takım kadar (-1/3) kaydırınca döngü
     kesintisiz kapanır. 2 kopya, döndürülmüş kabın genişliğini
     karşılamadığı için sağ kenarda boşluk bırakıyordu. */
  @keyframes vitrin-ak{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(-33.3333%,0,0); }
  }
  .vitrin-kare{
    position:relative; flex:0 0 auto;
    border-radius:14px; overflow:hidden;
    background:transparent;
  }

  /* Akan videonun üzerinde yazı okunmuyor; ortaya krem bir perde
     çekilip metin onun üstüne bırakılıyor. Perde tıklamayı yutmasın. */
  .hero-perde{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(64% 86% at 50% 50%,
        rgba(244,241,234,.95) 0%,
        rgba(244,241,234,.86) 32%,
        rgba(244,241,234,.52) 56%,
        rgba(244,241,234,0) 78%);
  }
  .hero-yazi{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:0 28px;
  }
  .hero-yazi h1{
    margin:0; color:var(--text);
    font-family:var(--serif); font-weight:400;
    font-size:clamp(30px, 5.2vw, 56px); line-height:1.05; letter-spacing:-.03em;
    text-wrap:balance;
    text-shadow:0 1px 0 rgba(255,255,255,.75);
  }
  .hero-yazi h1 em{ font-style:italic; color:var(--marka); }
  .hero-alt{
    margin:20px 0 0; max-width:42ch; text-wrap:balance;
    font-size:15px; line-height:1.6; color:var(--text-dim);
    text-shadow:0 1px 0 rgba(255,255,255,.6);
  }
  .vitrin-kare video{
    width:100%; height:100%; object-fit:cover; display:block;
    /* Açık palete otursun diye hafif yumuşatma */
    filter:saturate(.92) contrast(.98);
  }

  @media (max-width:640px){
    .hero{ height:300px; }
    .hero-alt{ font-size:13.5px; margin-top:14px; }
    .vitrin{ gap:10px; width:140%; margin-left:-20%; }
    .vitrin-satir{ gap:10px; }
  }
  @media (prefers-reduced-motion: reduce){
    .vitrin-satir{ animation:none; }
  }

  /* ---------------- Process strip ---------------- */
  .process{ padding:64px 0; border-bottom:1px solid var(--line-soft); }
  .process-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  }
  .process-item{ background:var(--ink); padding:32px 28px; transition:background .2s ease; }
  .process-item:hover{ background:var(--ink-2); }
  .process-item:hover .icon-orbit{ transform:scale(1.08); }
  .process-item .icon-orbit{ margin-bottom:18px; transition:transform .25s ease; display:inline-block; }
  .process-item h3{ font-size:15px; font-weight:600; margin:0 0 8px; }
  .process-item p{ font-size:13.5px; color:var(--text-faint); line-height:1.55; margin:0; }

  /* ---------------- Açıklama blokları ---------------- */
  .aciklama-blok{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
    margin-top:44px; padding-top:40px; border-top:1px solid var(--line-soft);
  }
  .aciklama h4{
    font-size:14px; font-weight:600; margin:0 0 12px;
    display:flex; align-items:center; gap:9px;
  }
  .aciklama h4::before{
    content:''; width:14px; height:2px; background:var(--marka); flex-shrink:0;
  }
  .aciklama p{ font-size:13.5px; line-height:1.65; color:var(--text-dim); margin:0 0 10px; }
  .aciklama p:last-child{ margin-bottom:0; }
  .aciklama b{ color:var(--text); font-weight:600; }

  /* ---------------- Fiyatlandırma ---------------- */
  .fiyat{ padding:96px 0; border-bottom:1px solid var(--line-soft); }

  .paket-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
  .paket-yukleniyor{ grid-column:1/-1; font-size:14px; color:var(--text-faint); margin:0; padding:28px 0; }

  .paket{
    position:relative; display:flex; flex-direction:column;
    border:1px solid var(--line); border-radius:14px; background:var(--ink-2);
    padding:30px 26px 28px;
    transition:border-color .16s ease, box-shadow .16s ease;
  }
  .paket:hover{ border-color:var(--marka-soluk); }
  /* Ortadaki paket yükseltilmiş çerçeve ve dolu düğmeyle öne çıkıyor;
     rozet üst kenara oturduğu için karta ek üst boşluk gerekiyor. */
  /* Rozet kartın üst kenarının dışında durduğu için ek üst boşluk
     gerekmiyor; eklenirse ortadaki kartın başlığı diğerlerinden kayıyor. */
  .paket.one-cikan{
    border-color:var(--marka);
    box-shadow:0 1px 2px rgba(22,22,22,.04), 0 26px 50px -32px rgba(63,107,85,.6);
  }
  .paket-rozet{
    position:absolute; top:-10px; left:26px;
    background:var(--marka); color:#fff; border-radius:999px;
    font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 12px; white-space:nowrap;
  }
  .paket-ad{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:23px; margin:0 0 7px; color:var(--text);
  }
  .paket-ozet{ font-size:13px; color:var(--text-dim); line-height:1.55; margin:0 0 24px; }
  .paket-fiyat{ display:flex; align-items:baseline; gap:7px; }
  .paket-tl{
    font-family:var(--serif); font-size:44px; line-height:1;
    letter-spacing:-.025em; color:var(--text);
  }
  .paket-para{ font-size:15px; color:var(--text-dim); }
  .paket-kredi{ margin:14px 0 0; font-size:13.5px; font-weight:500; color:var(--marka); }
  .paket-birim{ margin:5px 0 0; font-size:12px; color:var(--text-faint); }
  .paket-ayrac{ height:1px; background:var(--line-soft); margin:22px 0; }
  .paket-maddeler{
    list-style:none; margin:0 0 26px; padding:0; flex:1;
    display:flex; flex-direction:column; gap:11px;
  }
  .paket-maddeler li{ display:flex; gap:10px; font-size:13.5px; color:var(--text-dim); line-height:1.5; }
  .paket-maddeler svg{ flex:0 0 14px; margin-top:3px; color:var(--marka); }
  .paket-dugme{
    width:100%; padding:14px; border-radius:var(--radius); cursor:pointer;
    font-family:var(--sans); font-size:14.5px; font-weight:600;
    border:1px solid var(--marka); background:transparent; color:var(--marka);
    transition:background .15s ease, color .15s ease, opacity .15s ease;
  }
  .paket-dugme:hover:not(:disabled){ background:var(--marka-hafif); }
  .paket.one-cikan .paket-dugme{ background:var(--marka); color:#fff; }
  .paket.one-cikan .paket-dugme:hover:not(:disabled){ opacity:.9; background:var(--marka); }
  .paket-dugme:disabled{ opacity:.5; cursor:default; }

  .paket-mesaj{
    display:none; margin:22px 0 0; padding:14px 18px; border-radius:var(--radius);
    font-size:13.5px; line-height:1.6;
    border:1px solid var(--marka-soluk); background:var(--marka-hafif); color:var(--text);
  }
  .paket-mesaj.goster{ display:block; }
  .paket-mesaj.hata{ border-color:var(--danger); background:rgba(168,57,47,.07); color:var(--danger); }

  /* Kredinin nasıl harcandığını anlatan alt şerit */
  .fiyat-seritler{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    margin-top:40px; padding-top:34px; border-top:1px solid var(--line-soft);
  }
  .serit{ display:flex; gap:14px; align-items:flex-start; }
  .serit-buyuk{
    font-family:var(--serif); font-size:26px; line-height:1.1; color:var(--marka);
    flex:0 0 auto; min-width:46px;
  }
  .serit b{ display:block; font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
  .serit span.serit-alt{ font-size:12.5px; color:var(--text-dim); line-height:1.55; }
  .fiyat-not{ font-size:13px; color:var(--text-faint); line-height:1.6; margin:26px 0 0; }

  @media (max-width:900px){
    .aciklama-blok{ grid-template-columns:1fr; gap:24px; }
    .paket-grid{ grid-template-columns:1fr; gap:16px; }
    .fiyat-seritler{ grid-template-columns:1fr; gap:22px; }
  }

  /* ---------------- Workspace ---------------- */
  .workspace{ padding:96px 0 120px; }
  .section-head{ margin-bottom:56px; max-width:52ch; }
  .section-head h2{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:32px; margin:0 0 14px; }
  .section-head p{ color:var(--text-dim); font-size:15px; line-height:1.6; margin:0; }

  /* Numaralar kaldırıldı; başlık artık adımın kendisini taşıyor. */
  .step{ display:block; padding:36px 0; border-top:1px solid var(--line-soft); }
  .step:last-of-type{ border-bottom:1px solid var(--line-soft); }
  .step-body h3{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:21px; letter-spacing:-.015em; color:var(--text);
    margin:0 0 6px; display:flex; align-items:center; gap:11px;
  }
  /* Başlığın önündeki kısa yeşil çizgi, numaranın bıraktığı görsel çapayı
     numarasız biçimde geri veriyor. */
  .step-body h3::before{
    content:''; flex:0 0 auto; width:18px; height:2px;
    background:var(--marka); border-radius:2px;
  }
  /* Aynı adım içindeki ikinci başlık (Format Seç). */
  .step-body h3.step-ikinci{ margin-top:32px; }
  .step-body .step-hint{ font-size:13px; color:var(--text-faint); margin:0 0 18px; }

  .dropzone{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2);
    padding:18px 20px; display:flex; align-items:center; gap:16px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .dropzone:hover, .dropzone.drag{ border-color:var(--marka-soluk); background:var(--ink-3); }
  .dropzone:focus-within{ outline:none; border-color:var(--marka); }
  .dropzone input{ display:none; }
  .dz-icon{
    width:38px; height:38px; border-radius:50%; background:var(--ink); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--marka);
    font-size:15px; overflow:hidden;
  }
  .dz-icon img{ width:100%; height:100%; object-fit:cover; }
  .dz-text{ font-size:14px; }
  .dz-text .fname{ color:var(--text); }
  .dz-text .hint{ color:var(--text-faint); font-size:12.5px; margin-top:3px; }
  .dz-error{ color:var(--danger); font-size:12.5px; margin-top:3px; }

  textarea{
    width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
    color:var(--text); font-family:var(--sans); font-size:14.5px; line-height:1.65;
    padding:18px; resize:vertical; min-height:120px;
  }
  textarea::placeholder{ color:var(--text-faint); }
  textarea:focus{ outline:none; border-color:var(--marka); }
  .char-count{ text-align:right; font-size:12px; color:var(--text-faint); margin-top:8px; }

  /* Hukuki metinler */
  /* Uzun metin okunurken satır uzunluğu kritik: 70 karakteri aşınca göz
     satır başını kaybediyor. Bu yüzden panelin geniş kabından daha dar. */
  .hukuk{ max-width:720px; }
  .hukuk .guncel{
    font-size:12.5px; color:var(--text-faint); margin:0 0 34px;
    padding-bottom:18px; border-bottom:1px solid var(--line-soft);
  }
  .hukuk h2{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:21px; letter-spacing:-.01em; margin:40px 0 12px;
  }
  .hukuk h2:first-of-type{ margin-top:0; }
  .hukuk h3{
    font-size:14.5px; font-weight:600; margin:26px 0 8px; color:var(--text);
  }
  .hukuk p, .hukuk li{ font-size:14.5px; line-height:1.72; color:var(--text-dim); }
  .hukuk p{ margin:0 0 14px; }
  .hukuk ul, .hukuk ol{ margin:0 0 16px; padding-left:22px; }
  .hukuk li{ margin-bottom:7px; }
  .hukuk strong{ color:var(--text); font-weight:600; }
  .hukuk a{ color:var(--marka); text-decoration:underline; text-underline-offset:2px; }
  /* Doldurulması gereken yer — gözden kaçmasın diye görünür bırakıldı. */
  .hukuk .bos{
    background:#FFF3CD; color:#7A5C00; border:1px dashed #C9A227;
    border-radius:4px; padding:1px 6px; font-size:13px; font-weight:600;
  }
  .hukuk .kutu{
    border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; margin:0 0 20px; background:var(--ink-2);
  }
  .hukuk .kutu p:last-child{ margin-bottom:0; }
  .hukuk table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:13.5px; }
  .hukuk th, .hukuk td{
    text-align:left; vertical-align:top; padding:10px 12px;
    border-bottom:1px solid var(--line-soft); color:var(--text-dim);
  }
  .hukuk th{ color:var(--text); font-weight:600; white-space:nowrap; }
  .hukuk-menu{ display:flex; gap:18px; flex-wrap:wrap; margin:0 0 30px; font-size:13.5px; }
  .hukuk-menu a{ color:var(--text-dim); text-decoration:none; }
  .hukuk-menu a:hover{ color:var(--marka); }
  .hukuk-menu a[aria-current="page"]{ color:var(--marka); font-weight:600; }

  /* Altbilgideki sözleşme bağlantıları */
  .footer-inner{ flex-direction:column; gap:14px; text-align:center; }
  .footer-baglar{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
  /* 16px'lik satır kutusu WCAG 2.5.8'in 24×24 asgari hedefinin altındaydı;
     yükseklik padding yerine satır kutusuyla büyütülüyor ki görsel
     hizalama bozulmasın. */
  .footer-baglar a{
    color:var(--text-faint); text-decoration:none;
    display:inline-flex; align-items:center; min-height:24px;
  }
  .footer-baglar a:hover{ color:var(--marka); }

  @media (max-width:640px){
    .hukuk h2{ font-size:19px; }
    .hukuk table, .hukuk thead, .hukuk tbody, .hukuk tr, .hukuk th, .hukuk td{ display:block; }
    .hukuk th{ padding-bottom:2px; border-bottom:none; }
    .hukuk td{ padding-top:0; }
    .footer-baglar{ gap:14px 18px; }
  }

  /* Hesap alanı */
  /* flex-wrap şart: 360px ve altındaki ekranlarda bakiye rozeti + bağlantı +
     çıkış düğmesi tek satıra sığmıyor, taşıp sayfayı yatay kaydırıyordu.
     min-width:0 olmadan flex öğesi kendi içeriğinden küçülemez. */
  .hesap{
    display:flex; align-items:center; gap:14px;
    flex-wrap:wrap; justify-content:flex-end; min-width:0;
  }
  @media (max-width:400px){
    .hesap{ gap:10px; }
  }
  .bag{ font-size:13.5px; color:var(--text-dim); text-decoration:none; cursor:pointer; background:none; border:none; font-family:var(--sans); }
  .bag:hover{ color:var(--text); }

  /* Giriş penceresi */
  .ortu{
    position:fixed; inset:0; background:rgba(8,8,11,.78);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    z-index:50; display:none; align-items:center; justify-content:center; padding:20px;
    /* Klavye açılınca görünür alan küçülüyor; pencere sığmazsa kaydırılabilsin,
       yoksa gönder düğmesi klavyenin arkasında erişilemez kalıyor. */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .ortu.acik{ display:flex; }
  .pencere{
    width:100%; max-width:400px; background:var(--ink-2); border:1px solid var(--line);
    border-radius:14px; padding:30px;
    max-height:calc(100dvh - 40px); overflow-y:auto; margin:auto;
  }
  .pencere h3{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:23px; margin:0 0 6px; }
  .pencere p.alt{ font-size:13px; color:var(--text-faint); margin:0 0 22px; line-height:1.55; }
  .alan{ margin-bottom:14px; }
  .alan label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }
  .alan input{
    width:100%; background:var(--ink); border:1px solid var(--line); border-radius:8px;
    color:var(--text); font-family:var(--sans); font-size:14px; padding:11px 13px;
  }
  .alan input:focus{ outline:none; border-color:var(--marka); }
  .pencere-mesaj{ font-size:12.5px; line-height:1.55; margin:0 0 14px; display:none; }
  .pencere-mesaj.hata{ color:var(--danger); display:block; }
  .pencere-mesaj.iyi{ color:var(--marka); display:block; }
  .pencere-mesaj a{ color:var(--marka); word-break:break-all; }
  .pencere-alt{ text-align:center; font-size:12.5px; color:var(--text-faint); margin:16px 0 0; }

  /* Ücret kutusu */
  .ucret{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2);
    padding:16px 18px; margin-top:8px; display:none;
  }
  .ucret.goster{ display:block; }
  .ucret-satir{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; }
  .ucret-satir + .ucret-satir{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft); }
  .ucret-tutar{ font-family:var(--serif); font-size:20px; color:var(--marka); }
  .ucret-not{ font-size:12.5px; color:var(--text-faint); margin:10px 0 0; line-height:1.5; }
  .ucret-not.uyari{ color:var(--danger); }
  .deneme-kutu{
    margin-top:12px; padding:12px 14px; border:1px dashed var(--marka-soluk); border-radius:8px;
    background:var(--marka-hafif); display:flex; align-items:flex-start; gap:10px;
  }
  .deneme-kutu input{ margin-top:3px; accent-color:var(--marka); }
  .deneme-kutu span{ font-size:12.5px; line-height:1.55; }

  .secenekler{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .secenek{
    position:relative; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:16px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .secenek:hover{ border-color:var(--marka-soluk); }
  .secenek input{ position:absolute; opacity:0; pointer-events:none; }
  .secenek.secili{ border-color:var(--marka); background:var(--ink-3); }
  .secenek .baslik{ font-size:14px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
  .secenek .aciklama{ font-size:12.5px; color:var(--text-faint); line-height:1.55; }
  .secenek .rozet{
    font-size:10.5px; font-weight:500; color:var(--marka); letter-spacing:.02em;
    border:1px solid var(--marka-soluk); border-radius:4px; padding:1px 6px;
  }
  .oran-kutu{ border:1.5px solid var(--marka); border-radius:2px; flex-shrink:0; }
  .mod-notu{
    font-size:12.5px; color:var(--text-dim); line-height:1.55; margin:14px 0 0;
    padding:12px 14px; border-left:2px solid var(--marka-soluk); background:var(--ink-2);
    border-radius:0 6px 6px 0;
  }
  @media (max-width:640px){ .secenekler{ grid-template-columns:1fr; } }

  .consent{
    display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--text-dim);
    line-height:1.55; padding:32px 0; border-top:1px solid var(--line-soft);
  }
  /* Metin uzun; kutu esnemeyip küçülmemeli, yoksa dokunma hedefi kaybolur. */
  .consent input[type="checkbox"]{ flex:0 0 auto; margin-top:1px; }
  .consent b{ color:var(--text); font-weight:600; }
  .consent a{ color:var(--marka); text-decoration:underline; text-underline-offset:2px; }
  .consent input{ margin-top:3px; accent-color:var(--marka); }

  button.primary{
    width:100%; background:var(--marka); color:#fff; border:none; border-radius:var(--radius);
    font-family:var(--sans); font-size:15px; font-weight:600; padding:17px; cursor:pointer;
    transition:opacity .15s ease, transform .15s ease;
  }
  button.primary:disabled{ background:var(--ink-3); color:var(--text-faint); cursor:not-allowed; }
  button.primary:not(:disabled):hover{ opacity:.9; transform:translateY(-1px); }

  .status{
    margin-top:36px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:24px; display:none;
  }
  .status.show{ display:block; }
  .status-row{ display:flex; align-items:center; gap:12px; font-size:14px; }
  .spinner{
    width:16px; height:16px; border-radius:50%; border:2px solid var(--line);
    border-top-color:var(--marka); animation:spin .8s linear infinite; flex-shrink:0;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .status-note{ color:var(--text-faint); font-size:12.5px; margin-top:10px; line-height:1.55; }
  .status-yuzde{
    margin-left:auto; font-family:var(--serif); font-size:15px; color:var(--marka);
  }

  /* İlerleme çubuğu — uzun beklemede "çalışıyor mu" sorusunu ortadan kaldırır. */
  .ilerleme[hidden]{ display:none; }
  .ilerleme{
    height:6px; border-radius:999px; background:var(--ink-3);
    overflow:hidden; margin:16px 0 4px;
  }
  .ilerleme-dolu{
    height:100%; width:0; border-radius:999px; background:var(--marka);
    transition:width .8s cubic-bezier(.4,0,.2,1);
  }
  /* Belirsiz aşamalarda (hazırlık, kuyruk) çubuk kayan bir ışıkla canlı kalır. */
  .ilerleme-dolu.belirsiz{
    background:linear-gradient(90deg, var(--marka-soluk), var(--marka), var(--marka-soluk));
    background-size:200% 100%;
    animation:ilerleme-ak 1.6s linear infinite;
  }
  @keyframes ilerleme-ak{ to{ background-position:-200% 0; } }
  @media (prefers-reduced-motion: reduce){
    .ilerleme-dolu{ transition:none; }
    .ilerleme-dolu.belirsiz{ animation:none; }
  }

  .indir-dugme{
    display:inline-flex; align-items:center; gap:9px; margin-top:16px;
    background:var(--marka); color:#fff; border:none; border-radius:var(--radius);
    font-family:var(--sans); font-size:14px; font-weight:600;
    padding:13px 24px; text-decoration:none; transition:opacity .15s ease;
  }
  .indir-dugme:hover{ opacity:.9; }
  .indir-dugme[hidden]{ display:none; }

  .is-indir{
    display:inline-flex; align-items:center; gap:7px;
    font-size:13px; color:var(--marka); text-decoration:none;
    border:1px solid var(--marka-soluk); border-radius:7px;
    padding:6px 12px; white-space:nowrap; transition:background .15s ease;
  }
  .is-indir:hover{ background:var(--marka-hafif); }

  video{ width:100%; border-radius:var(--radius); margin-top:18px; display:block; }
  .download-link{
    display:inline-block; margin-top:16px; color:var(--marka); font-size:14px;
    text-decoration:none; border-bottom:1px solid var(--marka-soluk);
  }

  footer{ border-top:1px solid var(--line-soft); padding:40px 0; position:relative; z-index:1; }
  .footer-inner{ display:flex; justify-content:center; align-items:center; font-size:13px; color:var(--text-faint); }

  @media (max-width:900px){
    .process-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .container, .nav-inner{ padding-left:20px; padding-right:20px; }
  }
  @media (prefers-reduced-motion: reduce){
    .spinner{ animation:none; }
  }

  /* ================= Stüdyo sayfası ================= */
  .studyo{ padding:52px 0 110px; }
  .studyo-bas{ margin-bottom:34px; }
  .studyo-bas h1{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:34px; letter-spacing:-.02em; margin:0 0 10px;
  }
  .studyo-bas p{ font-size:15px; color:var(--text-dim); line-height:1.6; margin:0; max-width:54ch; }

  /* Tek satırlık durum şeridi: bakiye, ücretsiz hak ve kredi düğmesi.
     Önce ayrı iki blok hâlindeydi; üst üste binince sayfanın girişi
     formdan çok duyuru panosuna benziyordu. */
  .durum{
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    border:1px solid var(--line); border-radius:14px; background:var(--ink-2);
    padding:18px 22px; margin-bottom:46px;
  }
  .durum-sol{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .durum-etiket{ font-size:12.5px; color:var(--text-faint); }
  .durum-deger{ font-family:var(--serif); font-size:26px; line-height:1; color:var(--marka); }
  .durum-birim{ font-size:13.5px; color:var(--text-dim); }
  .durum-alt{ font-size:12.5px; color:var(--text-faint); }
  .durum-bosluk{ flex:1 1 0; min-width:0; }

  /* [hidden] tek başına yetmez: yazarın display kuralı tarayıcının
     hidden -> display:none varsayılanını ezer. Hak kullanılınca rozetin
     gerçekten kaybolması için bu satır şart. */
  .hediye[hidden]{ display:none; }
  .hediye{
    display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
    border:1px solid var(--marka); border-radius:999px;
    background:var(--marka-hafif); color:var(--marka);
    padding:8px 15px; font-size:13px; font-weight:500;
  }
  .durum-dugme{
    border:1px solid var(--marka); background:var(--marka); color:#fff;
    border-radius:var(--radius); font-size:13.5px; font-weight:600;
    padding:11px 20px; text-decoration:none; white-space:nowrap;
    transition:opacity .15s ease;
  }
  .durum-dugme:hover{ opacity:.9; }

  .mod-notu[hidden]{ display:none; }

  /* Üretim geçmişi */
  .is-listesi{ display:flex; flex-direction:column; gap:12px; }
  .is-satir{
    display:flex; align-items:center; gap:18px;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:16px 20px;
  }
  .is-ozet{ flex:1; min-width:0; }
  .is-prompt{
    font-size:13.5px; color:var(--text); margin:0 0 5px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .is-meta{ font-size:12px; color:var(--text-faint); }
  .is-durum{
    font-size:11.5px; font-weight:500; padding:5px 11px; border-radius:999px; white-space:nowrap;
  }
  .is-durum.done{ background:var(--marka-hafif); color:var(--marka); }
  .is-durum.failed{ background:rgba(168,57,47,.09); color:var(--danger); }
  .is-durum.suruyor{ background:var(--ink-3); color:var(--text-dim); }
  .is-ac{
    font-size:13px; color:var(--marka); text-decoration:none;
    border-bottom:1px solid var(--marka-soluk); white-space:nowrap;
  }
  .bos-liste{
    border:1px dashed var(--line); border-radius:var(--radius);
    padding:30px; text-align:center; font-size:13.5px; color:var(--text-faint);
  }

  .alt-bolum{ margin-top:80px; padding-top:56px; border-top:1px solid var(--line-soft); }
  .alt-bolum h2{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:28px; margin:0 0 10px;
  }
  .alt-bolum > p.sub{ font-size:14.5px; color:var(--text-dim); line-height:1.6; margin:0 0 30px; max-width:54ch; }

  @media (max-width:640px){
    .is-satir{ flex-wrap:wrap; gap:12px; }
    .durum{ flex-direction:column; align-items:stretch; gap:14px; }
    .durum-dugme{ text-align:center; }
  }

  /* ================= Yönetim paneli ================= */
  .panel{ padding:52px 0 110px; }
  .panel-bas{ margin-bottom:34px; }
  .panel-bas h1{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:32px; letter-spacing:-.02em; margin:0 0 8px;
  }
  .panel-bas p{ font-size:14.5px; color:var(--text-dim); margin:0; }

  .ozet-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:56px;
  }
  .ozet-kart{
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:20px 22px;
  }
  .ozet-etiket{ display:block; font-size:12px; color:var(--text-faint); margin-bottom:9px; }
  .ozet-deger{ font-family:var(--serif); font-size:28px; line-height:1; color:var(--marka); }
  .ozet-alt{ display:block; font-size:12px; color:var(--text-faint); margin-top:8px; }

  .panel-bolum{ margin-bottom:56px; }
  .panel-bolum h2{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:24px; margin:0 0 6px;
  }
  .panel-bolum > p.sub{ font-size:13.5px; color:var(--text-faint); margin:0 0 20px; }

  .tablo-kap{
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); overflow-x:auto;
  }
  table.tablo{ width:100%; border-collapse:collapse; font-size:13.5px; }
  table.tablo th, table.tablo td{
    text-align:left; padding:13px 18px; border-bottom:1px solid var(--line-soft);
    white-space:nowrap;
  }
  table.tablo th{
    background:var(--ink-3); font-weight:600; font-size:11.5px;
    color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase;
  }
  table.tablo tbody tr:last-child td{ border-bottom:none; }
  table.tablo tbody tr:hover{ background:var(--ink); }
  table.tablo td.sayi{ font-family:var(--serif); color:var(--marka); }
  table.tablo td.genis{
    max-width:360px; white-space:normal; color:var(--text-dim); line-height:1.5;
  }
  .tablo-bos{ padding:28px; text-align:center; font-size:13.5px; color:var(--text-faint); }

  .etiket{
    display:inline-block; font-size:11px; font-weight:500;
    padding:3px 9px; border-radius:999px; background:var(--ink-3); color:var(--text-dim);
  }
  .etiket.iyi{ background:var(--marka-hafif); color:var(--marka); }
  .etiket.kotu{ background:rgba(168,57,47,.09); color:var(--danger); }

  .mini-dugme{
    border:1px solid var(--marka); background:var(--marka); color:#fff;
    border-radius:7px; font-family:var(--sans); font-size:12.5px; font-weight:600;
    padding:7px 14px; cursor:pointer; transition:opacity .15s ease;
  }
  .mini-dugme:hover:not(:disabled){ opacity:.88; }
  .mini-dugme.ikincil{ background:transparent; color:var(--text-dim); border-color:var(--line); }
  .mini-dugme.ikincil:hover:not(:disabled){ border-color:var(--danger); color:var(--danger); }
  .mini-dugme:disabled{ opacity:.5; cursor:default; }

  .kredi-form{
    display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:20px 22px;
  }
  .kredi-form .alan{ margin:0; flex:1 1 180px; }
  .kredi-form .alan label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
  .kredi-form .alan input{
    width:100%; background:var(--ink); border:1px solid var(--line); border-radius:8px;
    color:var(--text); font-family:var(--sans); font-size:14px; padding:11px 13px;
  }
  .kredi-form .alan input:focus{ outline:none; border-color:var(--marka); }
  .kredi-form .mini-dugme{ padding:12px 22px; font-size:13.5px; }

  .panel-mesaj{
    display:none; margin-top:14px; padding:12px 16px; border-radius:var(--radius);
    font-size:13px; border:1px solid var(--marka-soluk);
    background:var(--marka-hafif); color:var(--text);
  }
  .panel-mesaj.goster{ display:block; }
  .panel-mesaj.hata{ border-color:var(--danger); background:rgba(168,57,47,.07); color:var(--danger); }

  @media (max-width:900px){
    .ozet-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:640px){
    .ozet-grid{ grid-template-columns:1fr; }
  }

  /* ================= Destek ================= */
  .destek-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; }
  .destek-kart{
    border:1px solid var(--line); border-radius:14px; background:var(--ink-2); padding:30px 28px;
  }
  .destek-kart h2{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:23px; margin:0 0 8px;
  }
  .destek-kart > p.sub{ font-size:13.5px; color:var(--text-dim); line-height:1.6; margin:0 0 24px; }
  .destek-alan{ margin-bottom:18px; }
  .destek-alan label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:7px; }
  .destek-alan select, .destek-alan textarea{
    width:100%; background:var(--ink); border:1px solid var(--line); border-radius:8px;
    color:var(--text); font-family:var(--sans); font-size:14px; padding:12px 13px;
  }
  .destek-alan textarea{ min-height:150px; resize:vertical; line-height:1.6; }
  .destek-alan select:focus, .destek-alan textarea:focus{ outline:none; border-color:var(--marka); }
  .destek-ipucu{ font-size:12px; color:var(--text-faint); margin:6px 0 0; }

  .destek-yan h3{ font-size:14px; font-weight:600; margin:0 0 14px; }
  .destek-liste{ display:flex; flex-direction:column; gap:10px; }
  .destek-satir{
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:14px 16px;
  }
  .destek-satir-bas{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .destek-no{ font-family:var(--serif); font-size:13px; color:var(--text-faint); }
  .destek-konu{ font-size:13.5px; font-weight:600; }
  .destek-satir p{ font-size:12.5px; color:var(--text-dim); line-height:1.55; margin:0; }
  .destek-tarih{ display:block; font-size:11.5px; color:var(--text-faint); margin-top:7px; }

  @media (max-width:900px){
    .destek-grid{ grid-template-columns:1fr; }
  }

  /* Tek kartlık sayfalar (parola sıfırlama) */
  .tek-kutu{ max-width:480px; }
  .tek-kutu .destek-kart{ padding:34px 30px; }

  /* Giriş penceresi: hatırla satırı ve parola bağlantısı */
  .pencere-satir{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; margin:4px 0 20px; flex-wrap:wrap;
  }
  .hatirla{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--text-dim); cursor:pointer; user-select:none;
  }
  .hatirla input{ accent-color:var(--marka); margin:0; }
  .parola-unuttum{
    background:none; border:none; padding:0; cursor:pointer;
    font-family:var(--sans); font-size:13px; color:var(--marka);
  }
  .parola-unuttum:hover{ text-decoration:underline; }

  /* ═══════════ Mobil menü (hamburger) ═══════════
     Önceden 640px altında .nav-links tamamen gizleniyordu ve yerine hiçbir
     şey konmamıştı: telefonda giriş yapan kullanıcı Destek sayfasına
     ulaşamıyordu. */
  .nav-ac{
    display:none; width:44px; height:44px; margin-right:-10px;
    align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; color:var(--text-dim);
  }
  .nav-ac span{
    display:block; width:20px; height:1.5px; background:currentColor;
    position:relative; transition:background .15s ease;
  }
  .nav-ac span::before, .nav-ac span::after{
    content:''; position:absolute; left:0; width:20px; height:1.5px;
    background:currentColor; transition:transform .2s ease;
  }
  .nav-ac span::before{ top:-6px; }
  .nav-ac span::after{ top:6px; }
  .nav-ac[aria-expanded="true"] span{ background:transparent; }
  .nav-ac[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
  .nav-ac[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

  /* Eşik 640px'ten 900px'e çekildi: yönetim menüsü 8 bağlantı taşıyor ve
     840px'te taşarak sayfayı yatay kaydırıyordu (860px'te sorun yok).
     Telefon yatay tutulduğunda görünüm 844px olur — tam kırılma noktası. */
  @media (max-width:900px){
    .nav-ac{ display:flex; }
    .nav-links{
      display:none;
      position:absolute; top:100%; left:0; right:0; z-index:20;
      flex-direction:column; gap:0;
      background:var(--ink-2); border-bottom:1px solid var(--line);
      padding:6px 20px 12px;
      box-shadow:0 18px 32px -24px rgba(22,22,22,.4);
    }
    .nav-links.acik{ display:flex; }
    .nav-links a{
      display:flex; align-items:center; min-height:48px;
      font-size:15px; color:var(--text);
      border-bottom:1px solid var(--line-soft);
    }
    .nav-links a:last-child{ border-bottom:none; }
  }

  /* ═══════════ (3) iOS otomatik yakınlaştırma ═══════════
     iOS Safari 16px altındaki bir alana dokununca sayfayı zorla
     yakınlaştırır ve kullanıcı elle geri çıkmak zorunda kalır.
     Yakınlaştırmayı tetikleyen tek şey gerçek font-size'dır. */
  @media (max-width:640px){
    input, select, textarea,
    .alan input, .kredi-form .alan input,
    .destek-alan select, .destek-alan textarea{
      font-size:16px;
    }
  }
  /* Genişlik tek başına yetmiyor: telefon YATAY tutulduğunda görünüm 844px
     olur, yukarıdaki kural devre dışı kalır ve alana dokunulduğunda iOS yine
     yakınlaştırır. Belirleyici olan ekran genişliği değil, işaretleme
     aygıtının kaba (parmak) olmasıdır. */
  @media (pointer: coarse){
    input, select, textarea,
    .alan input, .kredi-form .alan input,
    .destek-alan select, .destek-alan textarea{
      font-size:16px;
    }
  }

  /* ═══════════ (8) Dokunma hedefleri ═══════════
     Apple 44×44pt önerir. Metin bağlantıları görsel olarak aynı kalsın
     diye yükseklik padding ile değil, satır kutusuyla büyütülüyor. */
  .bag, .parola-unuttum{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .is-ac, .is-indir{
    display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  }
  .mini-dugme{ min-height:44px; }
  .marka-logo{ display:inline-flex; align-items:center; min-height:44px; }
  .nav-cta{ display:inline-flex; align-items:center; min-height:44px; }
  .durum-dugme, .bakiye-dugme{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
  .hatirla{ min-height:44px; }
  .hatirla input, .consent input, .deneme-kutu input{
    width:20px; height:20px; flex:0 0 20px;
  }
  .pencere-alt .bag{ min-height:36px; }

  @media (max-width:640px){
    /* Onayla ve İptal yan yanayken yanlış basma riski yüksek;
       parasal işlem geri alınamıyor. */
    .tablo td .mini-dugme{ display:block; width:100%; margin:0 0 8px; }
    .tablo td .mini-dugme:last-child{ margin-bottom:0; }
  }

  /* ═══════════ (12) Tabloda yapışkan ilk sütun ═══════════
     8 sütunlu tabloda sağa kaydırınca kimin satırında olduğun
     görünmüyordu; ilk sütun sabit kalıyor. */
  table.tablo th:first-child,
  table.tablo td:first-child{
    position:sticky; left:0; z-index:1;
    background:var(--ink-2);
    box-shadow:1px 0 0 var(--line-soft);
  }
  table.tablo thead th:first-child{ background:var(--ink-3); z-index:2; }
  table.tablo tbody tr:hover td:first-child{ background:var(--ink); }

  /* Dar ekranda kart iç boşlukları orantılansın. */
  @media (max-width:640px){
    .paket, .destek-kart, .ozet-kart, .pencere{ padding-left:22px; padding-right:22px; }
    .kredi-form{ padding:18px; }
  }

  /* ================= Sistem sağlığı ================= */
  .saglik-liste{ display:flex; flex-direction:column; gap:8px; }
  .saglik-satir{
    display:flex; align-items:flex-start; gap:14px;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--ink-2); padding:14px 18px;
  }
  .saglik-satir.uyari{ border-color:var(--marka-soluk); background:var(--marka-hafif); }
  .saglik-satir.hata{ border-color:var(--danger); background:rgba(168,57,47,.06); }
  .saglik-isaret{
    flex:0 0 22px; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:#fff; background:var(--marka); margin-top:1px;
  }
  .saglik-satir.uyari .saglik-isaret{ background:var(--coral); }
  .saglik-satir.hata .saglik-isaret{ background:var(--danger); }
  .saglik-satir > div{ flex:1; min-width:0; }
  .saglik-satir b{ display:block; font-size:13.5px; color:var(--text); margin-bottom:3px; }
  .saglik-satir span{ font-size:12.5px; color:var(--text-dim); line-height:1.5; word-break:break-word; }
  .saglik-sure{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }