/* Klip — misafir görünümü */

/* Renk eşikleri (WCAG 2.1 AA, beyaz zemin, 4.5:1):
     #1a1a1a  17.4:1   gövde metni
     #5a5a5a   6.9:1
     #6e6e66   5.1:1   ikincil metin
     #73736b   4.8:1   üçüncül metin — etiketler, tarihler, sayaçlar
     #bd4b43   4.9:1   hata ve uyarı metni
   Önceki #8a8a82 (3.5:1) ve #c4554d (4.4:1) eşiği geçmiyordu; ikisi de
   11-13px metinde kullanılıyordu, yani istisna kapsamına da girmiyordu.
   Yeni tonlar aynı ailede, bir tık koyu. */

/* width:100% verilen alanlara padding ve çerçeve eklenince kutu
   büyüyordu; giriş alanı pencereyi dışarı doğru itiyordu. */
*{ box-sizing:border-box; }

/* Atlama bağı. Her sayfada içerikten önce marka, iki gezinme kümesi,
   jeton göstergesi ve menü düğmesi var; klavyeyle gelen kişi bunların
   hepsini geçmeden başlığa ulaşamıyordu. Bağ yalnızca odaklanınca
   görünüyor — fare kullanan kimse fark etmiyor. */
.atla{
  /* Ekran dışına itmek yerine kırpılıyor: -9999px'e atılan bir öğe
     kutusuyla birlikte gidiyor ve sayfanın sol sınırını dışarı
     taşırıyor. Dosyanın başka yerlerinde de (jeton-sozu, thead)
     kullanılan yöntem bu. */
  position:absolute;
  top:8px;
  left:8px;
  z-index:100;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:#1a1a1a;
  color:#fff;
  font-size:14px;
  text-decoration:none;
}
.atla:focus{
  width:auto;
  height:auto;
  padding:12px 20px;
  overflow:visible;
  clip-path:none;
}

/* [hidden] bir sunum tercihi değil, "bu öğe yok" demek. Tek sınıflı bir
   kural bile onu geçebildiği için (örn. .ust .nav-basla, display:inline-flex)
   burada kesin olarak bağlanıyor. */
[hidden]{ display:none !important; }

/* Sayfanın iki ucunda tarayıcı esnediğinde (overscroll) görünen zemin
   sayfanın değil, kök öğenin arka planı. Düz beyaz bırakılınca siyah
   kapanışın altından beyaz sızıyordu. Gradyan viewport'a sabitlendiği
   için üstte beyaz (navbar tarafı), altta siyah (kapanış tarafı) kalıyor. */
html{
  background:linear-gradient(to bottom, #fff 0 50%, #000 50% 100%);
  background-attachment:fixed;
  /* Esneme tamamen kapalı: sayfa uçlarında zıplama olmuyor, dolayısıyla
     zemin hiç görünmüyor. Üstteki gradyan yine de duruyor — bu özelliği
     desteklemeyen tarayıcıda ikinci savunma olarak kalsın. */
  overscroll-behavior-y:none;
}

body{
  margin:0;
  font-family:'Inter', -apple-system, "Segoe UI", sans-serif;
  font-size:15px;
  color:#1a1a1a;
  background:#fff;
}

/* ── Üst menü ────────────────────────────────────────────────────────
   Yalnızca yazı. Çerçeve, zemin, düğme, ikon yok. */

.ust{
  display:flex;
  align-items:center;
  gap:32px;
  padding:20px 32px;
}

.ad{
  font-weight:600;
  text-decoration:none;
  color:inherit;
}

.menu,
.giris{
  display:flex;
  align-items:center;   /* dolu buton yanındaki yazılar ortada kalsın */
  gap:24px;
}

/* Ana sayfa ikonu. Menüdeki yazılarla aynı hizada dursun diye satır
   kutusu değil esnek kutu; rengi de yazılardan miras alıyor. */
.ust .ana-ikon{
  display:inline-flex;
  align-items:center;
  color:inherit;
}
.ust .ana-ikon:hover{ opacity:.6; }

/* Marka adı ile menü arasındaki dikey ayraç. Yazı değil, süs değil —
   yalnızca iki farklı işi ayıran kılcal bir çizgi. */
.ayrac{
  width:1px;
  height:18px;
  background:#d4d4d4;
  flex:none;
}

/* Giriş bağları sağa yaslanıyor, aradaki boşluk onları ayırıyor. */
.giris{ margin-left:auto; }

.ust a{
  text-decoration:none;
  color:inherit;
}
.ust a:hover{ text-decoration:underline; }

/* Geniş ekranda sarmal kendi kutusunu kurmuyor: menü ve hesap bağları
   doğrudan üst şeridin esnek öğeleri kalıyor, düzen değişmiyor. */
.ust-govde{ display:contents; }
/* Panel HTML'de kapalı işaretli ki dar ekranda JS beklemeden
   açık görünmesin. Geniş ekranda o işaretin hükmü kalkıyor. */
@media (min-width:1001px){
  .ust-govde[hidden]{ display:contents !important; }
}

/* Menü düğmesi yalnızca dar ekranda var. */
.ust-dugme{ display:none; }

/* Ana sayfa ikonunun yazısı geniş ekranda gereksiz: ikon zaten
   fiyatlandırmanın hemen solunda ve title/aria-label taşıyor. */
.ikon-yazi{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── Dar ekran: tam ekran menü paneli ────────────────────────────────
   Şeritte yalnızca marka, jeton ve menü düğmesi kalıyor. Bağlar tek
   nüsha: aynı düğümler panelin içinde alt alta diziliyor. */
/* ── Siyah şerit ─────────────────────────────────────────────────────
   Sayfanın iki kenarına kadar uzanıyor, başlık ve sloganı taşıyor.
   Yüksekliğini içeriği belirliyor. */

.serit{
  /* Geçişin boyu tek yerden ayarlanıyor: dar ekranda 110px'lik bant
     ekranın üçte birini yutuyordu, orada kısalıyor. Ara duraklar bu
     boya oranlı — düz bir gradyanın ortasındaki gri bulanıklığı
     kırıyorlar, geçiş gözle eşit ilerliyor. */
  --gecis:110px;
  /* Üstte keskin kenar: siyah, navbarın hemen altında başlıyor. */
  background:linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--gecis)),
    #333 calc(100% - var(--gecis) * .855),
    #636363 calc(100% - var(--gecis) * .745),
    #949494 calc(100% - var(--gecis) * .618),
    #bcbcbc calc(100% - var(--gecis) * .473),
    #dcdcdc calc(100% - var(--gecis) * .309),
    #f2f2f2 calc(100% - var(--gecis) * .145),
    #fff 100%);
  color:#fff;
  padding:72px 32px calc(var(--gecis) + 22px);
  text-align:center;
}

/* Büyük başlık. Ölçü ekrana göre esniyor; dar ekranda 34px'e iniyor,
   geniş ekranda 64px'i geçmiyor. Büyük puntoda satır yüksekliği ve
   harf aralığı ayrıca sıkılıyor, yoksa dağınık duruyor. */

.baslik{
  max-width:1000px;
  margin:0 auto;
  text-wrap:balance;          /* satır sonları elle ayarlanmış gibi dengelenir */
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:clamp(34px, 5.6vw, 64px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.035em;
}

/* Şeritsiz sayfalarda başlığı ortalamak için. Şerit kendi içinde
   zaten ortalıyor, orada gerekmiyor. */
.baslik-orta{ text-align:center; }

/* Slogan da beyaz. Başlıktan punto ve kalınlık farkıyla ayrılıyor. */

.slogan{
  max-width:640px;
  margin:24px auto 0;
  font-size:20px;
  line-height:1.5;
  text-wrap:balance;
}

/* ── İçerik ──────────────────────────────────────────────────────────*/

.icerik{
  /* Gövde üretim hattıyla aynı yapıda (iki kolon), bu yüzden genişliği
     de onunla aynı. */
  max-width:1040px;
  margin:0 auto;
  padding:72px 32px 120px;
}

/* Alt başlık — büyük başlıkla aynı yazı tipi, küçük punto. */

.alt-baslik{
  margin:0 0 32px;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
}

/* Numara madde metninin soluna taşıyor; satır sarınca metin numaranın
   altına değil, hizasında devam ediyor. */

.maddeler{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:madde;
  font-size:18px;
  line-height:1.6;
}
.maddeler li{
  counter-increment:madde;
  padding-left:48px;
  position:relative;
}
.maddeler li + li{ margin-top:20px; }
.maddeler li::before{
  content:counter(madde);
  position:absolute;
  left:0;
  font-variant-numeric:tabular-nums;
  /* Sıra numarası içeriğin parçası ("2. adımda şunu yap" denebiliyor),
     dolayısıyla kontrast eşiğine tabi. #9a9a9a 2,8:1 idi. */
  color:#73736b;
}

/* Madde içindeki eylemler. Ayrı düğme kurulmuyor; bağ cümlenin
   içinde kalıyor, alt çizgi harflerden biraz uzakta duruyor. */

.maddeler a{
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.maddeler a:hover{ text-decoration-thickness:2px; }

/* ── Kapanış şeridi ──────────────────────────────────────────────────
   Üstteki siyah şeridi karşılıyor; sayfa iki siyah bantla kapanıyor.
   Üst bar gibi yalnızca yazıdan oluşuyor. */

.kapanis{
  --gecis:110px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:calc(var(--gecis) + 18px) 32px 40px;
  /* Üstteki şeritle aynı geçiş; kapanış da sayfadan yumuşak ayrılıyor. */
  background:linear-gradient(to bottom,
    #fff 0,
    #f2f2f2 calc(var(--gecis) * .145),
    #dcdcdc calc(var(--gecis) * .309),
    #bcbcbc calc(var(--gecis) * .473),
    #949494 calc(var(--gecis) * .618),
    #636363 calc(var(--gecis) * .745),
    #333 calc(var(--gecis) * .855),
    #000 var(--gecis),
    #000 100%);
  color:#fff;
  font-size:14px;
}
.kapanis-baglar{
  margin-left:auto;
  display:flex;
  gap:24px;
}
.kapanis a{
  color:inherit;
  text-decoration:none;
}
.kapanis a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .kapanis{
    --gecis:76px;
    flex-wrap:wrap;
    gap:16px 20px;
    padding:calc(var(--gecis) + 16px) 20px calc(28px + env(safe-area-inset-bottom));
  }
  /* Bağlar iki satıra sarıyor; her biri kendi içinde bölünmesin diye
     kırılma noktası satır aralarında. */
  .kapanis-baglar{ margin-left:0; flex-wrap:wrap; gap:10px 20px; }
  .kapanis-baglar a{ white-space:nowrap; }
}

/* ── Paket kartları ──────────────────────────────────────────────────
   Üçü yan yana. Kartlar gölgesiz ve köşesiz; sayfanın geri kalanında da
   yuvarlatma yok, kılcal çerçeve yeterli sınırı çiziyor. */

.sayfa-bas{
  max-width:720px;
  margin:0 auto;
  padding:96px 32px 56px;
}

/* Başlığın altındaki kısa ayraç. Ortalı ve dar olduğu için kartların
   soluk çerçeve tonu burada görünmez kalıyordu; metin rengiyle çizilip
   bilinçli bir işaret hâline geliyor. */
.ayrac-kap{
  margin:0 auto 56px;
  padding:0 32px;
  text-align:center;
}
.ayrac-yatay{
  width:64px;
  margin:0 auto;
  border:0;
  border-top:1px solid #1a1a1a;
}

.paketler{
  max-width:1040px;
  margin:0 auto;
  padding:0 32px 120px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
}
@media (max-width:880px){
  .paketler{ grid-template-columns:1fr; max-width:520px; }
}

.paket{
  position:relative;      /* rozet köşeye oturabilsin diye */
  background:#fff;
  border:1px solid #1a1a1a;
  padding:32px 28px;
  transition:transform .18s ease, box-shadow .18s ease;
  /* Kartlar farklı uzunlukta; "Seç" hepsinde aynı hizada dursun diye
     kart dikey bir kolon ve seçim bağı en alta itiliyor. */
  display:flex;
  flex-direction:column;
}
/* Üç kart da aynı koyu çerçevede; vurgulu paketi artık yalnızca
   köşedeki rozet ayırıyor.

   Üzerine gelinen kart öne çıkıyor. Ayrım çerçeveden değil yükseklikten
   geliyor — çerçeveler zaten aynı. :focus-within ile klavyeyle gezenler
   de aynı geri bildirimi alıyor. */
.paket:hover,
.paket:focus-within{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .paket{ transition:none; }
  .paket:hover,
  .paket:focus-within{ transform:none; }
}

/* Rozet akıştan çıkarıldı: sağ üst köşeye yapışıyor ve kartın
   içeriğini aşağı itmiyor, böylece üç paket başlığı da aynı hizada. */
.paket-rozet{
  position:absolute;
  top:0;
  right:0;
  margin:0;
  padding:6px 10px;
  background:#1a1a1a;
  color:#fff;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
}

.paket-ad{
  margin:0;
  font-size:17px;
  font-weight:600;
}

.paket-fiyat{
  margin:16px 0 0;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:40px;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.03em;
}

.paket-kredi{
  margin:6px 0 0;
  font-size:14px;
  color:#5a5a5a;
}

.paket-ozet{
  margin:20px 0 0;
  font-size:15px;
  line-height:1.5;
  color:#5a5a5a;
}

.paket-maddeler{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  font-size:14px;
  line-height:1.5;
}
.paket-maddeler li{
  padding-left:18px;
  position:relative;
}
.paket-maddeler li + li{ margin-top:10px; }
.paket-maddeler li::before{
  content:'';
  position:absolute;
  left:0; top:9px;
  width:6px; height:1px;
  background:#1a1a1a;
}

/* margin-top:auto — kartlar eşit yüksekliğe uzadığı için buton üçünde
   de kartın dibine oturuyor, içerik uzunluğu ne olursa olsun. */
.paket-sec{
  margin:auto 0 0;
  padding-top:28px;
  text-align:center;
}

/* Dolu buton. Üzerine gelince zemin ve yazı yer değiştiriyor; sayfanın
   siyah–beyaz dilinde kalan, ek renk gerektirmeyen bir geri bildirim.
   Çerçeve her iki durumda da duruyor, yoksa buton hover'da büyüyor. */
.paket-sec .paket-dugme{
  display:inline-block;
  font-family:inherit;
  cursor:pointer;
  padding:13px 30px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.paket-sec .paket-dugme:hover{
  background:#fff;
  color:#1a1a1a;
}
.paket-sec .paket-dugme[disabled]{
  opacity:.5;
  cursor:default;
}
.paket-sec .paket-dugme:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:3px;
}

/* ── Giriş / kayıt modalı ────────────────────────────────────────────
   Ayrı sayfa değil: hangi sayfadaysan onun üstüne açılıyor. */

.ortu{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.ortu[hidden]{ display:none; }

.pencere{
  position:relative;
  width:100%;
  max-width:400px;
  min-width:0;          /* esnek öğe olarak içeriğine göre şişmesin */
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  border:1px solid #1a1a1a;
  padding:40px 36px 32px;
}

/* Başlık satırı: solda başlık, sağda kapatma. Kapatma düğmesi eskiden
   mutlak konumluydu ve her genişlikte içerik sütununun dışına taşıyordu
   (1200px'te 8px, 390px'te 15px) — üstelik başlıktan 19-28px yukarıda
   duruyordu. Artık aynı satırın öğesi. */
.pencere-bas{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

.pencere-kapat{
  flex:none;
  display:flex;
  padding:10px;
  /* Negatif kenar boşluğu: kutu parmak için büyük, ikon ise içerik
     sütununun tam sağ kenarına oturuyor. */
  margin:-10px -10px -10px 0;
  background:none;
  border:0;
  color:#5a5a5a;
  cursor:pointer;
}
.pencere-kapat:hover{ color:#1a1a1a; }

.pencere-baslik{
  margin:0;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:26px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
}

/* Google butonu. Logo Google'ın kendi renkleriyle çiziliyor; zemin beyaz
   kalıyor ki dört renk okunur olsun. Çerçeve sayfanın siyahı. */
.google-dugme{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 16px;
  background:#fff;
  border:1px solid #1a1a1a;
  color:#1a1a1a;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  /* Bağ olarak yazıldı (JS'siz de çalışsın diye); düğme gibi görünmesi
     için metin alt çizgisi kaldırılıyor. */
  text-decoration:none;
  transition:background-color .15s ease;
}
.google-dugme:hover{ background:#f2f2f2; }
.google-g{ flex:none; }

/* "ya da" ayracı — iki yanı çizgi, ortası yazı. */
.pencere-ayrac{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  font-size:13px;
  color:#6e6e66;
}
.pencere-ayrac::before,
.pencere-ayrac::after{
  content:'';
  flex:1;
  height:1px;
  background:#e0e0e0;
}

.alan{ display:block; }
.alan + .alan{ margin-top:16px; }
.alan[hidden]{ display:none; }
.alan-etiket{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:#5a5a5a;
}
.alan input{
  width:100%;
  padding:11px 12px;
  background:#fff;
  border:1px solid #c9c9c9;
  color:#1a1a1a;
  font-family:inherit;
  font-size:15px;
}
.alan input:focus{
  outline:none;
  border-color:#1a1a1a;
}

/* "Parolamı unuttum" — kayıt kipinde gizleniyor, orada anlamı yok. */
.pencere-unuttum{
  /* Parola alanıyla arasında nefes payı. Öncesinde 0px'ti, geniş
     ekranda negatif kenar boşluğuyla alanın üstüne biniyordu. */
  margin:14px 0 0;
  font-size:13px;
}
.pencere-unuttum a{ color:#6e6e66; }
.ortu[data-kip="kayit"] .pencere-unuttum{ display:none; }

/* Giriş/kayıt hatası. Boşken hiç yer kaplamıyor. */
.pencere-hata{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#bd4b43;
}
.pencere-hata:empty{ display:none; }

.pencere-dugme{
  width:100%;
  margin-top:24px;
  padding:13px 20px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.pencere-dugme:hover{ background:#fff; color:#1a1a1a; }

.pencere-alt{
  margin:20px 0 0;
  font-size:14px;
  color:#5a5a5a;
  text-align:center;
}

/* Bağlama özel not. Giriş/kayıt geçişinden ayrı dursun diye üstünde ince
   bir çizgi var: bu satır pencerenin akışının parçası değil, yan kapı. */
.pencere-not{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid #ececE6;
  font-size:13px;
  line-height:1.55;
  color:#6e6e66;
  text-align:center;
}
.pencere-not a{
  color:#1a1a1a;
  text-underline-offset:3px;
  /* Uzun e-posta adresi 280px'lik ekranda pencereyi dışarı itiyordu. */
  overflow-wrap:anywhere;
}

/* Bağ gibi görünen ama buton olan öğe — modal içinde sayfa değiştirmiyor. */
.yazi-dugme{
  padding:0;
  background:none;
  border:0;
  color:#1a1a1a;
  font-family:inherit;
  font-size:inherit;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.pencere :focus-visible,
.pencere-kapat:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:2px;
}

@media (max-width:480px){
  .pencere{ padding:36px 24px 28px; }
}

/* Satın alma akışından dönen bilgi satırı. role="status" ile ekran
   okuyucu da değişimi duyuruyor. */
.paket-mesaj{
  max-width:1040px;
  margin:-80px auto 0;
  padding:0 32px 120px;
  text-align:center;
  font-size:15px;
  line-height:1.5;
}
.paket-mesaj:empty{ display:none; }

/* Ödeme yolu bir bağ olarak duruyor; parmakla basılacak kadar büyük. */
.paket-odeme-bagi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:14px;
  padding:13px 26px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-weight:500;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.paket-odeme-bagi:hover{ background:#fff; color:#1a1a1a; }
.paket-mesaj[data-tur="hata"]{ color:#a8392f; }
/* Ödeme geldiğinde. Yeşil kullanılmıyor — sitenin paletinde yok; onay
   rengi yerine kalınlık ve metin rengiyle ayrılıyor. */
.paket-mesaj[data-tur="iyi"]{
  color:#1a1a1a;
  font-weight:500;
}

/* ── Destek formu ────────────────────────────────────────────────────
   Alanlar modaldakiyle aynı dilde; genişlik okunur bir sütunda tutuluyor. */

.destek-form{
  max-width:560px;
  margin:0 auto;
  padding:0 32px 120px;
}
/* Altında talep listesi varsa formun kendi alt payı gereksiz kalıyor:
   ayraç zaten ikisini ayırıyor. */
.destek-form:has(+ .talepler:not([hidden])){ padding-bottom:0; }

.alan select,
.alan textarea{
  width:100%;
  padding:11px 12px;
  background:#fff;
  border:1px solid #c9c9c9;
  color:#1a1a1a;
  font-family:inherit;
  font-size:15px;
}
.alan textarea{
  line-height:1.5;
  resize:vertical;
  min-height:150px;
}
.alan select:focus,
.alan textarea:focus{
  outline:none;
  border-color:#1a1a1a;
}
/* Henüz seçim yapılmamışken yer tutucu, gerçek seçimden soluk dursun. */
.alan select:invalid{ color:#6e6e66; }

.alan-sayac{
  display:block;
  margin-top:6px;
  text-align:right;
  font-size:13px;
  color:#6e6e66;
}

.destek-mesaj{
  margin:20px 0 0;
  font-size:15px;
  line-height:1.5;
}
.destek-mesaj:empty{ display:none; }
.destek-mesaj[data-tur="hata"]{ color:#a8392f; }

.destek-dugme{
  width:100%;
  margin-top:24px;
  padding:13px 20px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.destek-dugme:hover{ background:#fff; color:#1a1a1a; }
.destek-dugme[disabled]{ opacity:.5; cursor:default; }
.destek-dugme:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:3px;
}

/* Navbardaki çıkış — bağların arasında duruyor, onlarla aynı görünüyor.
   Buton olmasının sebebi gezinme değil eylem olması. */
.nav-dugme{
  padding:0;
  background:none;
  border:0;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
}
.nav-dugme:hover{ text-decoration:underline; }
.nav-dugme[disabled]{ opacity:.5; cursor:default; }

/* Başla — giriş yapmış kullanıcının üretim ekranına dönüş yolu.
   Navbardaki tek dolu öğe: sayfanın birincil eylemi o olduğu için.
   .ust a kuralındaki alt çizgi burada istenmiyor, hover zeminden geliyor. */
.ust .nav-basla{
  display:inline-block;
  padding:9px 18px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-weight:500;
  line-height:1;
  transition:background-color .15s ease, color .15s ease;
}
.ust .nav-basla:hover{
  background:#fff;
  color:#1a1a1a;
  text-decoration:none;
}

/* Jeton göstergesi. Sayfadaki tek yuvarlatılmış öğe: bir bilgi
   rozeti olduğu, tıklanacak bir şey olmadığı buradan anlaşılıyor. */
.nav-kredi{
  border:0;
  font-family:inherit;
  cursor:pointer;
  padding:7px 13px;
  border-radius:8px;
  background:#f2f2f2;
  color:#5a5a5a;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}
.nav-kredi b{
  color:#1a1a1a;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ── Jeton paneli ────────────────────────────────────────────────────
   Göstergeye tıklayınca altına açılıyor. Kutunun yumuşak diline uyması
   için köşeler yuvarlak; sayfanın geri kalanı keskin kalıyor. */

.jeton-sarmal{ position:relative; }

.nav-kredi[aria-expanded="true"]{ background:#e6e6e6; }

.jeton-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:60;              /* altındaki siyah şeridin üstünde kalmalı */
  min-width:260px;
  padding:18px;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  text-align:left;
}
.jeton-panel[hidden]{ display:none; }

.jeton-baslik{
  margin:0;
  font-size:13px;
  color:#6e6e66;
}

.jeton-sure{
  margin:6px 0 0;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  color:#1a1a1a;
}

.jeton-not{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#6e6e66;
}
.jeton-not:empty{ display:none; }

.ust .jeton-dugme{
  display:block;
  margin-top:16px;
  padding:11px 16px;
  border:1px solid #1a1a1a;
  border-radius:8px;
  background:#1a1a1a;
  color:#fff;
  font-size:14px;
  font-weight:500;
  line-height:1;
  text-align:center;
  transition:background-color .15s ease, color .15s ease;
}
.ust .jeton-dugme:hover{
  background:#fff;
  color:#1a1a1a;
  text-decoration:none;
}

@media (max-width:1000px){
  /* Panel göstergeye değil şeridin kendisine bağlanıyor: iki kenardan
     da sayfa boşluğu kadar içeride durur, gösterge nereye denk gelirse
     gelsin taşmaz. Sağa yaslı 260px'lik kutu dar ekranda taşıyordu. */
  .jeton-sarmal{ position:static; }
  .jeton-panel{
    top:calc(100% + 8px);
    left:auto;
    right:32px;
    min-width:0;
    width:min(300px, calc(100% - 64px));
  }
}
@media (max-width:640px){
  .jeton-panel{ left:20px; right:20px; width:auto; }
}

/* Dar ekran menüsünün biçimleri buraya, temel navbar kurallarının
   ardına yazılıyor: medya sorgusu özgüllük eklemiyor, eşit özgüllükte
   sonra gelen kural kazanıyor. Yukarıda dururken panelin içindeki
   "Başla" düğmesi masaüstü ölçülerinde kalıyordu. */
/* Eşik 1000px: giriş yapmış yöneticide üst şerit 933px yer istiyor,
   tablet dikeyde (768) sığmıyor. Altındaki her genişlikte panel. */
@media (max-width:1000px){
  .ust{
    --serit-yukseklik:56px;  /* panelin üst boşluğu buradan türüyor */
    position:relative;
    z-index:70;              /* açık panel şeridin altında kalmalı */
    box-sizing:border-box;
    min-height:var(--serit-yukseklik);
    flex-wrap:nowrap;
    gap:12px;
    /* Dikey boşluk 8px: jeton göstergesi parmak hedefi için 40px'e
       çıktı, şerit 56px'te kalsın. */
    padding:8px 32px;
    background:#fff;
  }
  .ayrac{ display:none; }
  /* Marka solda; kalan her şey (jeton, menü düğmesi) sağa toplanıyor.
     Boşluk markadan sonra veriliyor ki aradakiler yan yana kalsın. */
  .ad{ margin-right:auto; }

  /* Panel şeridin içinde duruyor (bağlar tek nüsha kalsın diye). Kendi
     yığın bağlamında olduğundan şerit içeriğini de örtüyor; marka ve
     kapatma düğmesi bu yüzden panelin üstüne alınıyor. */
  .ad, .ust-dugme{ position:relative; z-index:66; }

  /* Menü açıkken sayfa değil panel kayar; şerit de tepede sabitlenir,
     yoksa aşağıdan açıldığında kapatma düğmesi ekranın dışında kalır. */
  body.menu-acik{ overflow:hidden; }
  body.menu-acik .ust{ position:fixed; top:0; left:0; right:0; }
  body.menu-acik .jeton-sarmal{ display:none; }

  .ust-dugme{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;                 /* dar ekranda ezilip 20px'e iniyordu */
    width:44px; height:44px;   /* parmak hedefi */
    /* Şeridin sağ ucuna yaslanıyor; jeton göstergesi varsa onun sağında.
       Kutu 44px'e büyürken şeridin yüksekliğini ve iç boşluğunu
       bozmasın diye negatif kenar boşluğu veriliyor. */
    margin:-2px -10px -2px 0;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
  }
  .ust-dugme .ust-ikon-kapat{ display:none; }
  .ust-dugme[aria-expanded="true"] .ust-ikon-ac{ display:none; }
  .ust-dugme[aria-expanded="true"] .ust-ikon-kapat{ display:block; }


  .ust-govde{
    display:block;
    position:fixed;
    inset:0;
    z-index:65;
    padding:calc(var(--serit-yukseklik) + 22px) 32px
            calc(32px + env(safe-area-inset-bottom));
    background:#fff;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .ust-govde[hidden]{ display:none; }

  .menu,
  .giris{
    display:block;
    margin:0;
    max-width:520px;
    margin-inline:auto;
  }

  /* Panelde her bağ bir satır. Yükseklik 52px: başparmakla ıskalanmaz. */
  .ust-govde a,
  .ust-govde .nav-dugme{
    display:flex;
    align-items:center;
    width:100%;
    padding:15px 0;
    border-bottom:1px solid #ededed;
    font-size:17px;
    text-align:left;
  }
  .ust-govde a:hover,
  .ust-govde .nav-dugme:hover{ text-decoration:none; opacity:.55; }

  /* İkon satırı da yazıya dönüşüyor. */
  .ust .ana-ikon{ gap:10px; }
  .ust-govde .ikon-yazi{
    position:static;
    width:auto; height:auto;
    margin:0;
    clip-path:none;
  }

  /* Yatay tutulan telefonda ekran 390px kadar; panel zaten kayıyor ama
     üstteki boşluk kısalınca bir bağ daha görünüyor. Satır yüksekliği
     44px'te kalıyor, parmak hedefi küçülmüyor. */
  @media (max-height:520px){
    .ust-govde{ padding-top:calc(var(--serit-yukseklik) + 8px); }
    .ust .nav-basla{ margin-top:14px; }
  }

  /* Başla panelin sonunda, dolu düğme olarak. Taban kural onu
     inline-block yapıyor; ortalama için burada esnek kutuya dönüyor. */
  .ust .nav-basla{
    display:flex;
    justify-content:center;
    margin-top:24px;
    padding:16px 18px;
    border-bottom:1px solid #1a1a1a;
    font-size:16px;
  }
}

/* Dar ekranda kenar boşluğu sayfanın geri kalanıyla birlikte 20px'e
   iniyor; üst şerit içerikten daha içeride kalmasın. */
@media (max-width:640px){
  .ust{ padding:8px 20px; }
  .ad{ font-size:16px; }
  .ust-govde{
    padding-left:20px;
    padding-right:20px;
  }
}

/* Küçük ekranda pencerenin iç boşluğu daralıyor: 320px'de alan
   genişliği 198px'e düşüyordu ve alt satır ekrandan taşıyordu. */
@media (max-width:480px){
  .ortu{ padding:16px; }
  .pencere{
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);   /* tarayıcı çubuğu açılıp kapanınca */
    padding:32px 22px 26px;
  }
  .pencere-baslik{ margin-bottom:20px; font-size:23px; }
}

/* ── Üretim formu ────────────────────────────────────────────────────
   Adım adım ilerleyen tek sütun. Okunur genişlikte tutuluyor. */

.uretim{
  max-width:1040px;
  margin:0 auto;
  padding:96px 32px 120px;
}


.adim-baslik{
  margin:0;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:26px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
}

.adim-aciklama{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.6;
  color:#5a5a5a;
}

/* Biçim ve boyut kuralı — öneriden ayrı dursun ki göz onu ayrı okusun. */
.adim-kural{
  margin:8px 0 0;
  font-size:13px;
  color:#6e6e66;
}

/* Adımın en önemli cümlesi — kalan açıklamadan renk ve punto ile ayrılıyor.
   Kalın yapılmadı; kalınlık başlıkla yarışıyordu. */
.adim-vurgu{
  margin:24px 0 0;
  font-size:17px;
  line-height:1.5;
  color:#1a1a1a;
}
.adim-vurgu + .adim-aciklama{ margin-top:20px; }

/* ── Dosya yükleme alanı ─────────────────────────────────────────────
   Tıklanabilir ve sürükle-bırak kabul eden tek kutu. Etiketin kendisi
   girdiyi tetiklediği için ayrı bir "seç" düğmesi yok. */

.yukle{
  position:relative;   /* Kaldır rozeti kartın köşesine otursun diye */
  display:block;
  margin-top:20px;
  padding:36px 24px;
  border:1px solid #c9c9c9;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.yukle:hover{ border-color:#1a1a1a; }

/* Dosya sürüklenirken kutu belirginleşiyor — bırakma noktası belli olsun. */
.yukle.uzerinde{
  border-color:#1a1a1a;
  background:#f7f7f7;
}

.yukle-bos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#6e6e66;
  text-align:center;
}
.yukle-bos[hidden]{ display:none; }

.yukle-ana{
  font-size:15px;
  color:#1a1a1a;
}

.yukle-dolu{
  display:flex;
  align-items:center;
  gap:18px;
}
.yukle-dolu[hidden]{ display:none; }

/* Önizleme karesi: fotoğraf oranı ne olursa olsun aynı boyutta durur,
   içerik kırpılarak sığdırılır. Kaldır rozeti bunun köşesine oturuyor. */
.yukle-kare{
  display:block;
  width:96px;
  height:96px;
  flex:none;
}
.yukle-onizleme{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#f2f2f2;
}

/* Rozet kartın sağ üst köşesinde. Etiketin içinde durduğu için
   tıklanınca dosya seçici açılmasın diye olay JS'te durduruluyor. */
.yukle-kaldir{
  position:absolute;
  top:0;
  right:0;
  padding:3px 7px;
  border:0;
  background:#1a1a1a;
  color:#fff;
  font-family:inherit;
  font-size:11px;
  line-height:1.4;
  cursor:pointer;
}
.yukle-kaldir:hover{ background:#a8392f; }
.yukle-kaldir:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:2px;
}

.yukle-bilgi{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;          /* uzun dosya adı kutuyu şişirmesin */
}
.yukle-ad{
  font-size:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.yukle-boyut{
  font-size:13px;
  color:#6e6e66;
}

/* ── Yönetim ─────────────────────────────────────────────────────────
   Bilgi yoğun tek sayfa. Ölçüler geri kalanından dar: burada okunan şey
   metin değil sayı ve satır, göz aşağı iner. */
.yonetim{
  max-width:1120px;
  margin:0 auto;
  padding:72px 32px 110px;
}
.yonetim-kapali{
  margin:32px 0 0;
  font-size:15px;
  color:#6e6e66;
}

/* Sekiz kutu dörderli iki sıra. auto-fit bırakılsaydı son sırada boş
   hücreler kalıyor ve ızgaranın zemini çıplak görünüyordu. */
.ozet-izgara{
  display:grid;
  /* minmax(0,…): 1fr'nin tabanı min-content olduğu için "DOĞRULANMIŞ"
     gibi bölünmeyen uzun bir etiket sütunu şişirip ızgarayı taşırıyordu. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  margin-top:36px;
  background:#ececE6;
  border:1px solid #ececE6;
}
@media (max-width:760px){
  .ozet-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ozet-kutu{ padding:14px; }
  .ozet-ad{ overflow-wrap:anywhere; }
}
.ozet-kutu{
  background:#fff;
  padding:16px 18px;
}
.ozet-ad{
  margin:0;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#73736b;
}
.ozet-deger{
  margin:6px 0 0;
  font-family:'Inter Tight',-apple-system,sans-serif;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ozet-kutu[data-dikkat="1"] .ozet-deger{ color:#bd4b43; }

.sekmeler{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin:36px 0 0;
  border-bottom:1px solid #ececE6;
}
.sekme{
  padding:10px 16px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  font:inherit;
  font-size:15px;
  color:#6e6e66;
  cursor:pointer;
}
.sekme[aria-selected="true"]{
  color:#1a1a1a;
  font-weight:500;
  border-bottom-color:#1a1a1a;
}

.pano{ margin-top:26px; }

/* Satır listesi. Gerçek bir <table> yerine ızgara: sütun sayısı bölümden
   bölüme değişiyor ve dar ekranda alt alta düşmesi gerekiyor. */
.satirlar{
  display:grid;
  gap:0;
  border:1px solid #ececE6;
}
.satir{
  display:grid;
  gap:10px 18px;
  padding:12px 16px;
  border-bottom:1px solid #ececE6;
  font-size:14px;
  align-items:baseline;
}
.satir:last-child{ border-bottom:0; }
.satir-basi{
  background:#fafaf7;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#73736b;
}
.satir b{ font-weight:500; }
.satir .soluk{ color:#73736b; }
.satir .kirik{ color:#bd4b43; }
.satir-eylem{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.satir-dugme{
  padding:5px 12px;
  border:1px solid #1a1a1a;
  background:#fff;
  font:inherit;
  font-size:13px;
  color:#1a1a1a;
  cursor:pointer;
}
.satir-dugme[data-birincil="1"]{ background:#1a1a1a; color:#fff; }
.satir-dugme[disabled]{ opacity:.45; cursor:default; }

.pano-bos{
  margin:0;
  padding:18px 0;
  font-size:15px;
  color:#73736b;
}
.pano-baslik{
  margin:28px 0 12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#73736b;
}
.pano-baslik:first-child{ margin-top:0; }

.jeton-yukle{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:14px;
  margin-bottom:26px;
}
.jeton-yukle .alan{ max-width:240px; }
.yonetim-sonuc{
  flex:1 1 100%;
  margin:0;
  font-size:13px;
  color:#bd4b43;
}
.yonetim-sonuc[data-iyi="1"]{ color:#3f6b55; }
.yonetim-sonuc:empty{ display:none; }

@media (max-width:760px){
  .satir{ grid-template-columns:1fr !important; gap:8px; }
  .satir-basi{ display:none; }
  /* Başlık satırı gizlendiği için her hücre kendi sütun adını yanında
     taşıyor; yoksa alt alta dizilen değerler ne olduklarını söylemiyor. */
  .satir > [data-ad]{
    display:grid;
    grid-template-columns:92px minmax(0, 1fr);
    gap:12px;
    align-items:baseline;
    /* Bölünecek yeri olmayan uzun bir e-posta sütundan taşıyordu. */
    overflow-wrap:anywhere;
  }
  .satir > [data-ad]::before{
    content:attr(data-ad);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#73736b;
  }
  /* Eylem hücresi düğme taşıyor; ızgaraya girmesin, düğmeler
     etiketin altına değil yanına dizilsin. */
  .satir > .satir-eylem[data-ad]{ display:flex; }
  .satir > .satir-eylem[data-ad]::before{ content:none; }
}

/* ── Ödeme dönüşü ────────────────────────────────────────────────────
   Shopier'den geri dönünce sonucu söyleyen şerit. Başarılıda sakin,
   başarısızda uyarı tonunda; ikisi de sayfanın üstünde duruyor. */
.odeme-bildirim{
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:1040px;
  margin:28px auto 0;
  padding:14px 18px;
  border:1px solid #1a1a1a;
  font-size:15px;
  line-height:1.55;
}
.odeme-bildirim[data-tur="hata"]{
  border-color:#bd4b43;
  color:#8f3a34;
}
.odeme-metin{ margin:0; flex:1 1 auto; }
.odeme-kapat{
  flex:none;
  margin-top:3px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
}
.odeme-kapat:hover{ opacity:.6; }

/* ── Parola sıfırlama ────────────────────────────────────────────────
   Destek formuyla aynı kabuk; yalnızca iki açıklama satırı ekleniyor. */
.sifirla-aciklama{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.6;
  color:#4a4a44;
}
.sifirla-kural{
  margin:0;
  font-size:13px;
  color:#73736b;
}

/* ── Destek talepleri ────────────────────────────────────────────────
   Formun altında, aynı genişlikte. Kart değil satır: okunacak şey kısa
   ve sıralı. */
.talepler{
  max-width:560px;
  margin:0 auto;
  padding:0 32px 90px;
}
/* Ayraç, gönder butonuna yapışmasın. */
.talepler .ayrac-kap{ margin:48px auto 44px; }
.talep-baslik{
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#73736b;
}
.talep-liste{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}
.talep{
  padding-bottom:18px;
  border-bottom:1px solid #ececE6;
}
.talep:last-child{ border-bottom:0; padding-bottom:0; }

.talep-ust{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.talep-konu{ font-size:15px; font-weight:500; }
.talep-durum{
  flex:none;
  padding:2px 8px;
  border:1px solid #d8d8d2;
  font-size:12px;
  color:#6e6e66;
}
.talep[data-durum="cozuldu"] .talep-durum{
  border-color:#1a1a1a;
  color:#1a1a1a;
}
.talep-mesaj{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.6;
  color:#4a4a44;
}
.talep-tarih{
  margin:6px 0 0;
  font-size:13px;
  color:#73736b;
}

/* ── Profil ──────────────────────────────────────────────────────────
   Tek kolon, sola dayalı. Okunacak bilgi az ve sıralı; ortalamak ya da
   kartlara bölmek gözü gereksiz gezdirirdi. */
.profil{
  max-width:620px;
  margin:0 auto;
  padding:88px 32px 110px;
}
.profil-bas{
  margin:0;
  font-family:'Inter Tight',-apple-system,sans-serif;
  font-size:clamp(34px,5vw,48px);
  font-weight:600;
  letter-spacing:-.03em;
}

.profil-bolum{
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid #ececE6;
}
.profil-baslik{
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#73736b;
}

.profil-liste{
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.profil-satir{
  display:grid;
  /* Etiket içeriği kadar, değer kalanı alıyor. Değer sütunu minmax(0,…)
     ile kendi en küçük içeriğinden de daralabiliyor: bölünecek yeri
     olmayan uzun bir e-posta adresi satırdan taşmasın. */
  grid-template-columns:auto minmax(0, 1fr);
  gap:16px;
  align-items:baseline;
  font-size:15px;
}
.profil-satir dt{ color:#6e6e66; }
.profil-satir dd{
  margin:0;
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere;
}

.profil-form{
  display:grid;
  gap:16px;
  max-width:360px;
}
.profil-kural{
  margin:-4px 0 0;
  font-size:13px;
  color:#73736b;
}
.profil-sonuc{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#bd4b43;
}
.profil-sonuc[data-iyi="1"]{ color:#3f6b55; }
.profil-sonuc:empty{ display:none; }

.profil-dugme{
  justify-self:start;
  padding:11px 24px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}
.profil-dugme[disabled]{ opacity:.55; cursor:default; }

.profil-bag{
  display:inline-block;
  margin-top:18px;
  font-size:15px;
  color:#1a1a1a;
}

/* ── Kliplerim ───────────────────────────────────────────────────────
   İki durum: liste ve boş ekran. Boş ekran sayfanın ortasında duruyor,
   liste ise sayfanın üstünden başlıyor. */
.klipler{
  max-width:1040px;
  margin-inline:auto;
  padding:0 20px 90px;
}

.klip-liste{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  /* min() olmadan 280px'lik taban, 280px'lik bir ekranda kenar
     boşluğu kalmadığı için satırı taşırıyordu. */
  grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap:28px 24px;
}

.klip{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Önizleme çerçevesi. Video hazır değilse içine uydurma bir görüntü
   konmuyor; yalnızca durumu söyleyen koyu bir kare duruyor. */
.klip-kare{
  position:relative;
  aspect-ratio:16 / 9;
  background:#1a1a1a;
  border:1px solid #1a1a1a;
  overflow:hidden;
  display:grid;
  /* Satır açıkça kutunun boyu kadar: auto bırakılırsa içerideki
     height:100% çözülemiyor ve video kendi oranına göre taşıyor. */
  grid-template-rows:minmax(0, 1fr);
  place-items:center;
}
/* Dikey ve yatay klipler aynı listede. Kare her kartta 16:9 kalıyor,
   içerik kırpılmadan sığdırılıyor: dikey video yanlardan boşluk bırakıp
   ortalanıyor. Kartların yüksekliği içerikten bağımsız olduğu için
   ızgara satırları hiç kaymıyor.
   Not: /api/jobs şu an `oran` alanını döndürmüyor (veritabanında var).
   Dönseydi bile karar aynı olurdu; bu yol oranı bilmeden de doğru. */
.klip-kare video,
.klip-kare img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.klip-durum{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#e8e8e2;
  padding:0 16px;
  text-align:center;
}
.klip-nokta{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e8e8e2;
  flex:none;
  animation:nabiz 1.6s ease-in-out infinite;
}
.klip[data-durum="failed"] .klip-nokta{ background:#bd4b43; animation:none; }
.klip[data-durum="done"]   .klip-nokta{ display:none; }

@keyframes nabiz{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.klip-oynat{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  display:grid;
  place-items:center;
}

.klip-bilgi{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  font-size:13px;
  color:#73736b;
}
.klip-tarif{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.5;
  color:#4a4a44;
  /* İki satırdan sonrası kesiliyor; kartlar aynı boyda kalsın. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.klip-eylem{
  display:flex;
  gap:14px;
  margin:auto 0 0;
  padding-top:12px;
  font-size:14px;
}
.klip-eylem a{ color:#1a1a1a; }
.klip-indir{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:#1a1a1a;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* Yönetim panelinde üretim önizlemesi. Satırdaki kapak küçük bir düğme;
   tıklanınca video ortadaki pencerede açılıyor. */
.is-onizleme{ display:flex; align-items:center; }
.is-kapak{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #ececE6;
  background:#f6f6f2;
  font:inherit;
  font-size:13px;
  color:#1a1a1a;
  overflow:hidden;
  cursor:pointer;
  display:block;
}
.is-kapak img{ width:100%; height:100%; object-fit:cover; display:block; }
.is-kapak[data-yazi="1"]{ width:auto; height:auto; padding:6px 10px; }
.is-kapak:hover{ border-color:#1a1a1a; }

.uretim-ortu{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.uretim-sayfa{
  width:100%;
  max-width:420px;
  max-height:92vh;
  overflow:auto;
  background:#fff;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.uretim-ust{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.uretim-baslik{
  margin:0;
  font-size:14px;
  font-weight:600;
  overflow-wrap:anywhere;
}
.uretim-kapat{
  flex:none;
  padding:6px 12px;
  border:1px solid #1a1a1a;
  background:#fff;
  font:inherit;
  font-size:13px;
  color:#1a1a1a;
  cursor:pointer;
}
/* Dikey (9:16) klipte pencereyi taşırmasın diye yükseklik sınırlı;
   video kendi oranını koruyup siyah zeminde ortalanıyor. */
.uretim-kare{ background:#000; display:flex; }
.uretim-kare video{ width:100%; max-height:58vh; display:block; }
.uretim-bilgi{ margin:0; font-size:13px; color:#73736b; }
.uretim-tarif{ margin:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.uretim-tarif:empty{ display:none; }
.uretim-bag{ font-size:13px; color:#1a1a1a; }

@media (max-width:760px){
  /* Dar ekranda hücreler etiketleriyle alt alta diziliyor; kapak
     karesinin tabanı yoktur, baseline hizası onu etiketin üstüne
     kaydırıyordu. */
  .satir > .is-onizleme[data-ad]{ align-items:center; }
}

/* İndirme sayfası. Dar ekranda alttan açılan bir tabaka, geniş ekranda
   ortada duran bir pencere — seçim parmakla da fareyle de rahat olsun. */
.indir-ortu{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(0,0,0,.42);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.indir-sayfa{
  width:100%;
  max-width:420px;
  background:#fff;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.indir-baslik{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
}
.indir-secenek{
  padding:14px 16px;
  border:1px solid #1a1a1a;
  background:#fff;
  font:inherit;
  font-size:15px;
  color:#1a1a1a;
  cursor:pointer;
  text-align:left;
}
.indir-secenek:first-of-type{ background:#1a1a1a; color:#fff; }
.indir-secenek[disabled]{ opacity:.55; cursor:default; }
.indir-vazgec{
  margin-top:2px;
  padding:12px;
  border:0;
  background:none;
  font:inherit;
  font-size:15px;
  color:#6e6e66;
  cursor:pointer;
}
.indir-hata{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#bd4b43;
}
.indir-hata:empty{ display:none; }

@media (min-width:560px){
  .indir-ortu{ align-items:center; }
  .indir-sayfa{ padding-bottom:20px; }
}

/* Boş ekran. Kutunun kendisi dikeyde ortalanıyor; navbar ve kapanış
   şeridi dışındaki alanın ortasına denk gelsin diye yükseklik viewport'tan
   hesaplanıyor. */
.klip-bos{
  min-height:62vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.klip-bos-ana{
  margin:0;
  font-family:'Inter Tight',-apple-system,sans-serif;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.02em;
}
.klip-bos-alt{
  margin:10px 0 0;
  font-size:15px;
  color:#6e6e66;
}
.klip-bos-dugme{
  margin-top:24px;
  padding:11px 22px;
  background:#1a1a1a;
  color:#fff;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
}
.klip-bos-dugme:hover{ background:#000; }

/* ── Üretim ekranı ───────────────────────────────────────────────────
   İçerik dar ve ortada; karşılaştırılacak bir şey yok. */

.uretim-ekrani{
  max-width:460px;
  margin-inline:auto;
  text-align:center;
  padding:24px 0;
}

/* Dönen halka + sırayla beliren ikonlar. Halka sürekli dönüyor, ikonlar
   üst üste duruyor ve gecikmeli opaklıkla birbirine devrediyor. */
.donme{
  position:relative;
  width:96px;
  height:96px;
  margin:0 auto 34px;
}
.donme-halka{
  position:absolute;
  inset:0;
  border:1.5px solid #ececE6;
  border-top-color:#1a1a1a;
  border-radius:50%;
  animation:donsun 1.5s linear infinite;
}
.donme-ikonlar{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#1a1a1a;
}
.donme-ikon{
  grid-area:1 / 1;
  width:30px;
  height:30px;
  opacity:0;
  animation:ikonGec 8s ease-in-out infinite;
}
.donme-ikon:nth-child(2){ animation-delay:2s; }
.donme-ikon:nth-child(3){ animation-delay:4s; }
.donme-ikon:nth-child(4){ animation-delay:6s; }

@keyframes donsun{ to{ transform:rotate(360deg); } }

/* Dörtte biri görünür, kalanında saklı: dört ikon sırayla geçiyor. */
@keyframes ikonGec{
  0%       { opacity:0; transform:scale(.86); }
  4%, 21%  { opacity:1; transform:scale(1); }
  25%, 100%{ opacity:0; transform:scale(1.06); }
}

/* İlerleme çubuğu. Dolu kısmın üstünde sürekli akan bir parıltı var —
   yüzde değişmediği anlarda bile işin sürdüğünü gösteriyor. */
.cubuk{
  position:relative;
  height:4px;
  background:#ececE6;
  overflow:hidden;
}
.cubuk-dolu{
  display:block;
  height:100%;
  width:0;
  background:#1a1a1a;
  transition:width .6s ease;
}
.cubuk-dolu::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  animation:parilti 1.8s linear infinite;
}

@keyframes parilti{
  from{ transform:translateX(-100%); }
  to  { transform:translateX(100%); }
}

.uretim-asama{
  margin:20px 0 0;
  font-size:16px;
  font-weight:500;
}
.uretim-kalan{
  margin:6px 0 0;
  font-size:14px;
  color:#6e6e66;
  font-variant-numeric:tabular-nums;
}
.uretim-not{
  margin:26px 0 0;
  font-size:14px;
  line-height:1.6;
  color:#6e6e66;
}
.uretim-not a{ color:#1a1a1a; }

/* Hareket azaltma açıkken dönme, parıltı ve geçişler durur; ilerleme
   yine de okunur çünkü yüzde ve aşama metni yazıyla veriliyor. */
@media (prefers-reduced-motion: reduce){
  .donme-halka, .donme-ikon, .cubuk-dolu::after{ animation:none; }
  .donme-ikon:first-child{ opacity:1; }
  .cubuk-dolu{ transition:none; }
}

/* Özet listesi. Etiket solda dar, değer sağda geniş — tarif uzun
   olabildiği için kendi satırına akıyor. */
.ozet{
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.ozet-satir{
  display:grid;
  grid-template-columns:110px minmax(0, 1fr);
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid #ececE6;
  font-size:14px;
  line-height:1.5;
}
.ozet-satir:last-child{ border-bottom:0; padding-bottom:0; }
.ozet dt{ color:#73736b; }
.ozet dd{ margin:0; color:#1a1a1a; }
.ozet-tarif dd{ color:#4a4a44; }

/* Ücretsiz deneme. Üret butonunun altında ve ondan belirgin biçimde
   daha sakin: asıl eylem üretim, bu ikinci bir yol. */
.deneme{ margin-top:18px; }
.deneme-dugme{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:14px;
  color:#1a1a1a;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.deneme-not{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#6e6e66;
}

/* Sahne tarifi kutusu. Uzunluk sınırı 600 karakter; sunucu da aynı
   sınırı uyguluyor (config.MAX_PROMPT_CHARS). */
.tarif-kutu{
  display:block;
  width:100%;
  margin-top:18px;
  padding:12px 14px;
  border:1px solid #d8d8d2;
  border-radius:0;
  background:#fff;
  font:inherit;
  font-size:15px;
  line-height:1.6;
  color:#1a1a1a;
  resize:vertical;
}
.tarif-kutu:focus{
  outline:none;
  border-color:#1a1a1a;
}
.tarif-sayac{
  margin:8px 0 0;
  font-size:13px;
  color:#73736b;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.tarif-sayac[data-dolu="1"]{ color:#1a1a1a; }

/* Önceki adımda ne seçildiğinin hatırlatması. Başlığın altında, vurgu
   metninden önce; küçük ve soluk — okunacak metin değil, bağlam. */
.adim-secim{
  margin:10px 0 0;
  font-size:14px;
  color:#6e6e66;
}
.adim-secim:empty{ display:none; }

/* Örnek tarifler. Okunacak metinler; kutular kart değil, alıntı gibi
   duruyor — soldaki alanla yarışmasınlar. */
.ornek-baslik{
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#73736b;
}
.ornek-metinler{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.ornek-metin{
  border-left:2px solid #d8d8d2;
  padding:2px 0 2px 14px;
  font-size:14px;
  line-height:1.6;
  color:#4a4a44;
}

/* Onay kutusu. Metin uzun, kutu kısa: kutu ilk satıra hizalanıyor,
   metin altına akıyor. */
.onay{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  font-size:14px;
  line-height:1.5;
  cursor:pointer;
}
.onay input{
  flex:none;
  width:16px;
  height:16px;
  margin:1px 0 0;
  accent-color:#1a1a1a;
  cursor:pointer;
}

.adim-hata{
  margin:10px 0 0;
  font-size:14px;
  color:#a8392f;
}
.adim-hata:empty{ display:none; }

/* ── Adımın iki sütunu ───────────────────────────────────────────────
   Solda anlatım ve girdi, sağda o adımı gösteren görsel. Dar ekranda
   alt alta iniyor; görsel önce değil sonra geliyor ki iş akışı bozulmasın. */

.adim{
  flex:0 0 100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:56px;
  /* Sağdaki kolon her adımda soldakinin dikey ortasına hizalanıyor. */
  align-items:center;
}
@media (max-width:900px){
  .adim{ grid-template-columns:1fr; gap:32px; }
}

/* Üretim ekranı tek kolon. Kural .adim'den SONRA gelmeli: iki seçicinin
   ağırlığı eşit, sonra yazılan kazanıyor. */
.adim-tek{ grid-template-columns:1fr; }

/* Giriş sayfasında iki kolon üstten hizalı: metin, sağdaki ilk örnekle
   aynı satırda başlıyor. Üretim adımlarında ortalama kalıyor, çünkü
   orada sağdaki örneğin boyu seçime göre değişiyor. */
.adim-ust{ align-items:start; }

.adim-gorsel{ margin:0; }

.ornek-cizim{
  display:block;
  width:100%;
  height:auto;
}

.adim-gorsel figcaption{
  margin-top:12px;
  font-size:13px;
  line-height:1.5;
  color:#6e6e66;
}

/* ── Örnek görsel ────────────────────────────────────────────────────
   Kaynak kare ve aynı karenin video çerçevesi. Oranlar aspect-ratio ile
   sabit; fotoğraf hangi boyutta olursa olsun kutular oynamıyor. */

.ornek{
  display:flex;
  align-items:center;
  gap:18px;
}

.ornek-kutu{
  position:relative;
  overflow:hidden;
  border:1px solid #1a1a1a;
  background:#f2f2f2;
}
.ornek-kutu img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ornek-foto{
  flex:0 0 38%;
  aspect-ratio:3 / 4;
}
.ornek-video{
  flex:1 1 auto;
  /* min-width:auto esnek öğenin içeriğinden daha fazla küçülmesini
     engelliyor; dar ekranda kutu satırdan taşıyordu. */
  min-width:0;
  aspect-ratio:16 / 9;
}

.ornek-ok{ flex:none; }

/* Etiket karenin içinde duruyor; altına yazılsaydı iki kutunun yazıları
   farklı yüksekliklere düşüyordu. */
.ornek-etiket{
  position:absolute;
  left:0;
  bottom:0;
  padding:4px 8px;
  background:#1a1a1a;
  color:#fff;
  font-size:11px;
  line-height:1.3;
}

.ornek-oynat{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.28);
}

@media (max-width:420px){
  .ornek{ gap:10px; }
  .ornek-ok{ width:20px; }
}

/* ── Adım ilerletme ──────────────────────────────────────────────────
   Girdisi tamamlanmayan adımda kapalı duruyor; "ilerle" dediğinde ne
   olacağını baştan belli ediyor. */

.ilerle{
  margin-top:28px;
  padding:13px 32px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
  /* Aynı görünüm hem <button> hem <a> için (jeton satın al). */
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.ilerle:hover{ background:#fff; color:#1a1a1a; }
.ilerle:disabled{
  border-color:#c9c9c9;
  background:#c9c9c9;
  color:#fff;
  cursor:not-allowed;
}
.ilerle:disabled:hover{ background:#c9c9c9; color:#fff; }
.ilerle:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:3px;
}


/* ── Adım hattı ──────────────────────────────────────────────────────
   Adımlar yan yana dizili; geçiş rayı yatayda kaydırarak oluyor.
   Sayfa kaymıyor: rayın yüksekliği en uzun adıma göre sabit kaldığı
   için adım değişince belgenin boyu değişmiyor. */

/* Kabuğun boyu JS tarafından etkin adıma ayarlanıyor; geçiş kayma ile
   aynı süre ve eğride olsun diye burada tanımlı. JS çalışmazsa satır
   iç boyunu koruyor, sayfa yine de doğru görünüyor. */
.hat{ overflow:hidden; transition:height .38s cubic-bezier(.4, 0, .2, 1); }

.hat-ray{
  display:flex;
  align-items:flex-start;
  transition:transform .38s cubic-bezier(.4, 0, .2, 1);
  will-change:transform;
}

/* Görünmeyen adımlar odak sırasından da çıkıyor; sekme tuşu ekran
   dışındaki alanlara atlamıyor. */
.adim[inert]{ visibility:hidden; }

@media (prefers-reduced-motion: reduce){
  .hat-ray{ transition:none; }
  .hat{ transition:none; }
}

.adim-dugmeler{
  display:flex;
  gap:12px;
  margin-top:28px;
  align-items:center;
}

.geri{
  padding:13px 26px;
  border:1px solid #1a1a1a;
  background:#fff;
  color:#1a1a1a;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease;
}
.geri:hover{ background:#f2f2f2; }
.geri[hidden]{ display:none; }
.geri:focus-visible{
  outline:2px solid #1a1a1a;
  outline-offset:3px;
}

/* Butonlar artık satır içinde; tekil üst boşluk kalktı. */
.adim-dugmeler .ilerle{ margin-top:0; }

/* Ses dosyasının önizlemesi yok; kare yerine ikon kutusu duruyor. */
.yukle-kare-ses{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f2f2;
}

/* ── Ücret hesabı ────────────────────────────────────────────────────
   Şarkı seçilince sağ sütunda beliriyor. Sunucudaki saniye ücretiyle
   hesaplanıyor, burada sabit sayı tutulmuyor. */

.hesap-bos{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#6e6e66;
}

.hesap{
  border:1px solid #1a1a1a;
  padding:24px;
}

.hesap-satir{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin:0;
  font-size:15px;
  color:#5a5a5a;
}
.hesap-satir + .hesap-satir{ margin-top:12px; }
.hesap-satir b{
  color:#1a1a1a;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.hesap-cizgi{
  margin:18px 0;
  border:0;
  border-top:1px solid #e0e0e0;
}

.hesap-kalan b{
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:20px;
  letter-spacing:-.02em;
}

.hesap-not{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#6e6e66;
}
.hesap-not:empty{ display:none; }
.hesap-not[data-tur="hata"]{ color:#a8392f; }

/* İki örnek satırı alt alta. Etiketler yalnızca üst satırda; alttakinde
   tekrar etseydi sütun başlığı olmaktan çıkıp gürültü olurdu. */
.ornek-satirlar{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ── Seçenek kartları ────────────────────────────────────────────────
   Radyo düğmesi gizli; seçili olan çerçeveyle işaretleniyor. Kartın
   tamamı tıklanabilir alan. */

.secim{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.secenek{
  display:block;
  padding:20px;
  border:1px solid #c9c9c9;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease;
}
.secenek:hover{ border-color:#1a1a1a; }

.secenek input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.secenek-ad{
  display:block;
  font-size:17px;
  font-weight:600;
}
.secenek-aciklama{
  display:block;
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
  color:#5a5a5a;
}

/* Seçili kart: iç gölge ikinci bir çizgi çiziyor, çerçeve kalınlaşmış
   gibi duruyor ama kutu büyümüyor, komşuları kaymıyor. */
.secenek:has(input:checked){
  border-color:#1a1a1a;
  box-shadow:inset 0 0 0 1px #1a1a1a;
}
.secenek:focus-within{
  outline:2px solid #1a1a1a;
  outline-offset:3px;
}

/* ── Tür görseli ─────────────────────────────────────────────────────*/

.tur-gorsel[hidden]{ display:none; }

.kare{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid #1a1a1a;
  background:#f2f2f2;
}
.kare img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Seçim grupları arasındaki başlık. */
.secim-baslik{
  margin:28px 0 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6e6e66;
}
.secim-baslik + .secim{ margin-top:12px; }

/* Boyut gibi kısa seçenekler yan yana sığıyor. */
.secim-yatay{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.secenek-kisa{ padding:16px; }
.secenek-kisa .secenek-ad{ font-size:15px; }
.secenek-kisa .secenek-aciklama{ margin-top:4px; font-size:13px; }

/* Türe bağlı uyarı (dudak senkronunda kırpma gibi). */
.adim-not{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.6;
  color:#6e6e66;
}
.adim-not:empty{ display:none; }

/* Kare dizisi artık JS tarafından doldruluyor; oran ve sütun sayısı
   seçime göre değişken olarak veriliyor.

   Yükseklik sınırı: kareler aspect-ratio ile çizildiği için dikey oranda
   tek kare serbest bırakılırsa kolon boyunca uzuyor. Yüksekliği doğrudan
   kısmak oranı bozardı; onun yerine dizinin genişliği, en uzun kare
   --kare-tavan'ı aşmayacak şekilde hesaplanıyor. */
.kare-dizi{
  --kare-bosluk:10px;
  --kare-tavan:460px;
  --kare-sutun:3;
  --kare-satir:1;
  display:grid;
  grid-template-columns:repeat(var(--kare-sutun), 1fr);
  gap:var(--kare-bosluk);
  /* Tek kare kaldığında dizi kolondan dar kalıyor; ortada dursun. */
  margin-inline:auto;
  /* Bir karenin yüksekliği: tavandan satır aralıkları düşülüp satıra
     bölünüyor. Genişlik oradan türetiliyor; böylece dizi kaç sütun kaç
     satır olursa olsun --kare-tavan'ı aşmıyor. */
  max-width:calc(
    var(--kare-sutun) * (var(--kare-oran, 16 / 9))
      * ((var(--kare-tavan) - (var(--kare-satir) - 1) * var(--kare-bosluk))
         / var(--kare-satir))
    + (var(--kare-sutun) - 1) * var(--kare-bosluk)
  );
}
.kare{ aspect-ratio:var(--kare-oran, 16 / 9); }

/* Üretim bittiğinde ya da başarısız olduğunda beliren yol. */
.uretim-yol{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:28px;
}
.uretim-yol .ilerle,
.uretim-yol .geri{ margin-top:0; text-decoration:none; }

/* Bitmiş ya da kırılmış işte dönen ikonların anlamı kalmıyor. */
.uretim-ekrani[data-durum="done"] .donme-ikonlar,
.uretim-ekrani[data-durum="failed"] .donme-ikonlar,
.uretim-ekrani[data-durum="done"] .donme-halka,
.uretim-ekrani[data-durum="failed"] .donme-halka{ animation:none; }
.uretim-ekrani[data-durum="failed"] .cubuk-dolu{ background:#bd4b43; }
.uretim-ekrani[data-durum="failed"] .uretim-asama{ color:#bd4b43; }

/* Dokunmatik ekranda sürükleyip bırakacak bir şey yok; o cümle parçası
   yalnızca imleçli cihazlarda duruyor. Ölçü genişlik değil giriş türü:
   dar bir masaüstü penceresinde sürükleme hâlâ mümkün. */
@media (hover: none) and (pointer: coarse){
  .surukle{ display:none; }
}

/* ── Kayıt sonrası doğrulama ─────────────────────────────────────────
   Kayıt oturum açmıyor; hesap ancak e-postadaki bağlantıyla açılıyor.
   Pencere burada formdan bu bölüme geçiyor. */
.pencere-posta{ margin-top:4px; }
.posta-mesaj{
  margin:0;
  font-size:15px;
  line-height:1.6;
}
.posta-adres{
  margin:10px 0 0;
  font-weight:500;
  overflow-wrap:anywhere;
}
.posta-ipucu{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.6;
  color:#6e6e66;
}
.posta-bag{ margin:14px 0 0; font-size:14px; }
.posta-bag a{ color:#1a1a1a; text-underline-offset:3px; }
.pencere-posta .pencere-dugme{ margin-top:22px; }
.posta-sonuc{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#6e6e66;
}
.posta-sonuc:empty{ display:none; }

/* Doğrulama dönüşü — /api/dogrula oturumu açıp stüdyoya yolluyor. */
.dogrulandi{
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:1040px;
  margin:28px auto 0;
  padding:14px 18px;
  border:1px solid #cfe0d4;
  background:#f4f9f5;
  font-size:14px;
  line-height:1.6;
}
.dogrulandi p{ margin:0; }
.dogrulandi button{
  flex:none;
  margin-left:auto;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
}

/* ── Dar ekranda dikey ritim ─────────────────────────────────────────
   Masaüstündeki 72/120px'lik boşluklar telefonda bir ekranın yarısını
   yiyor. Üstelik şeridin altındaki geçiş bandı (76px) zaten ayırıcı bir
   boşluk yaratıyor; üstüne bir de 72px eklenince başlık ekranın çok
   aşağısına düşüyordu. Bu blok dosyanın sonunda: medya sorgusu özgüllük
   eklemiyor, .icerik'in taban kuralından önce yazıldığında hiç
   uygulanmıyordu. */
@media (max-width:640px){
  .serit{ --gecis:76px; padding:56px 20px calc(var(--gecis) + 18px); }
  .slogan{ margin-top:16px; font-size:17px; }

  /* Üstte geçiş bandı var, altta kapanışın kendi bandı — ikisi de
     ayırıcı. Buradaki boşluk onların üstüne biniyordu. */
  .icerik{ padding:28px 20px 64px; }

  .alt-baslik{ margin-bottom:24px; font-size:24px; }
  .maddeler{ font-size:16px; }
  .maddeler li{ padding-left:32px; }
  .maddeler li + li{ margin-top:16px; }
}

/* Tek kolona inen iki kolonlu bölümlerde kolonlar arası boşluk, kolon
   içindeki satır boşluklarından belirgin biçimde büyük olmalı; yoksa
   örnek görseller metnin devamı gibi duruyor. */
@media (max-width:900px){
  .adim{ gap:48px; }
}

/* ── Parmak hedefleri ────────────────────────────────────────────────
   Dar ekranda tıklanacak her şey en az ~44px'lik bir alana oturuyor.
   Görsel ölçüler değişmiyor: kutu iç boşlukla büyürken aynı kadar
   negatif kenar boşluğu veriliyor, hizalar ve satır yükseklikleri
   yerinde kalıyor. Cümlenin içindeki bağlar (maddelerdeki "giriş yap"
   gibi) kapsam dışı — onlar metnin parçası, ayrı bir düğme değil. */
@media (max-width:1000px){
  /* Marka adı: şeridin yüksekliği zaten 52px, hedef onu dolduruyor. */
  .ad{ padding:12px 0; margin-top:-12px; margin-bottom:-12px; }

  /* Jeton göstergesi 28px'ti. Büyüyen kutu şeridi de uzatıyor; şeridin
     iç boşluğu ve --serit-yukseklik buna göre ayarlandı (56px). */
  .nav-kredi{ padding:13px; }

  /* Kapanıştaki bağlar tek satırlık yazıydı; hedefleri satır aralarına
     taşmadan büyüsün diye satır boşluğu da 10→4px'e iniyor. */
  .kapanis-baglar{ row-gap:4px; }
  .kapanis-baglar a{ display:inline-flex; align-items:center; min-height:44px; }

  /* Kart eylemleri ("İndir", "Destek al") yan yana duruyor; yalnızca
     dikeyde büyüyorlar, aradaki 14px'lik boşluk korunsun diye. */
  .klip-eylem{ padding-top:2px; }
  .klip-eylem > *{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  .profil-bag{ padding:12px 0; margin-top:6px; margin-bottom:-12px; }

  .yazi-dugme{ padding:12px 6px; margin:-12px -6px; }

  /* Kapatma düğmesi artık başlık satırının öğesi; hedefi iç boşlukla
     büyüyor, negatif kenar boşluğu hizayı koruyor. */
  .pencere-kapat{ padding:13px; margin:-13px -13px -13px 0; }

  /* Ödeme bildirimindeki kapatma ikonu 12x15'ti. */
  .odeme-kapat{ padding:13px; margin:-10px -13px -13px 0; }

  /* Onay kutusunun etiketi tek satıra düştüğünde 21px kalıyordu; kutunun
     kendisi 16px. Tıklanan şey etiketin tamamı, o yüzden hedef ona
     veriliyor. Üstündeki 18px'lik boşluk korunuyor. */
  /* Hedef 44px'e çıkıyor ama hizalama üstte kalıyor: açık rıza metni
     dar ekranda sekiz satıra kadar iniyor ve ortalanmış bir kutu o
     bloğun ortasında havada duruyor. */
  .onay{ min-height:44px; padding:6px 0; margin-top:12px; }
  .onay input{ width:20px; height:20px; margin:2px 0 0; }

  /* "Ücretsiz denemek istiyorum" — bağ görünümlü ama tek başına duran
     bir eylem. */
  .deneme{ margin-top:8px; }
  .deneme-dugme{ display:inline-flex; align-items:center; min-height:44px; }
  .deneme-not{ margin-top:0; }

  /* Yönetim satırlarındaki eylem düğmeleri 28px'ti. */
  .satir-dugme{ padding:12px 16px; }

  /* Jeton panelindeki "Jeton satın al" 38px'ti. */
  .ust .jeton-dugme{ padding:14px 16px; }

  /* Penceredeki "Parolamı unuttum" tek satırlık bir yazıydı. */
  /* Hedef 44px'e çıkıyor ama kutu büyümüyor: negatif kenar boşluğu
     aradaki nefes payını yiyordu, alanın dibine yapışmıştı. */
  .pencere-unuttum a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin:-12px 0;
  }
}

/* Çok dar ekran (Galaxy Fold kapak ekranı, 280px). Şeritte marka, jeton
   ve menü düğmesi aynı anda sığmıyor: gösterge yalnızca sayıya iniyor —
   "jeton" sözcüğü ekran okuyucu için duruyor — ve marka adı son çare
   olarak kısalabiliyor. */
@media (max-width:360px){
  .jeton-sozu{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .nav-kredi{ padding:13px 11px; }
  .ust{ gap:10px; padding-left:16px; padding-right:16px; }
  .ad{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* ── Sözleşme sayfaları ──────────────────────────────────────────────
   Gizlilik, Kullanım Koşulları ve Satış Sözleşmesi. Bunlar okunmak için
   değil, aranmak için açılan sayfalar: kullanıcı "verim nereye gidiyor"
   ya da "nasıl iade alırım" sorusunun cevabını tarayarak bulur. Bu
   yüzden ölçü gövde metninden büyük (17px) ve satır uzunluğu 68 karaktere
   bağlı — göz bir sonraki satırın başını kaybetmeden dönebilsin.

   Sayfanın geri kalanı beyaz; burada da kutu, gölge, zemin yok. Ayrım
   yalnızca tipografiyle kuruluyor. */

/* Metin sütunu başlıkla birebir aynı genişlikte; 624px gövde ölçüsü
   17px Inter'de yaklaşık 76 karakter yapıyor. */
.hukuk-sayfa .sayfa-bas{
  max-width:688px;
  padding:96px 32px 48px;
}

/* Sözleşme başlıkları pazarlama başlığı değil; ana sayfadaki 64px'lik
   ölçü burada bağırıyordu. Aynı yazı tipi, bir kademe aşağıda. */
.hukuk-sayfa .baslik{
  font-size:clamp(28px, 4.4vw, 42px);
  line-height:1.1;
  letter-spacing:-.025em;
}

/* Başlığın altındaki bir cümlelik özet. Ana sayfadaki .slogan siyah
   şerit içinde beyaz duruyor; burada şerit yok, rengi metne göre
   geri çekiliyor. */
.sayfa-slogan{
  max-width:520px;
  margin:20px auto 0;
  text-align:center;
  font-size:17px;
  line-height:1.55;
  color:#6e6e66;
  text-wrap:balance;
}

.hukuk{
  max-width:688px;
  margin:0 auto;
  padding:0 32px 96px;
  font-size:17px;
  line-height:1.65;
}

/* "Son güncelleme" tarihi metnin parçası değil, künyesi. Başlıktan önce
   geliyor ve puntosuyla geri çekiliyor. */
.hukuk .guncel{
  margin:0 0 56px;
  padding-bottom:20px;
  border-bottom:1px solid #ececE6;
  font-size:13px;
  color:#73736b;
}

/* Numaralı ana bölümler. Sözleşmede "madde 4'e bak" denebildiği için
   numaralar metnin içinde yazılı; CSS sayacı kullanılmıyor ki metni
   kopyalayan kişi numaraları da alsın. */
.hukuk h2{
  margin:64px 0 16px;
  /* Çapalı adresle (#haklariniz) gelindiğinde başlık ekranın en tepesine
     yapışmasın; üstünde nefes payı kalsın. */
  scroll-margin-top:24px;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
}
.hukuk h2:first-of-type{ margin-top:0; }

.hukuk h3{
  margin:40px 0 12px;
  font-size:17px;
  font-weight:600;
}

.hukuk p{ margin:0 0 20px; }

.hukuk ul{
  margin:0 0 20px;
  padding-left:22px;
}
.hukuk li{ margin-bottom:10px; }
.hukuk li::marker{ color:#c9c9c9; }

/* Metin içi bağlar cümlenin içinde kalıyor; alt çizgi harflerden uzakta.
   Ana sayfadaki .maddeler a ile aynı davranış. */
.hukuk a{
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.hukuk a:hover{ text-decoration-thickness:2px; }

.hukuk code{
  padding:2px 6px;
  border-radius:4px;
  background:#f2f2f2;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.88em;
}

/* Tablolar. Dikey çizgi yok: satırları ayıran tek şey ince bir yatay
   çizgi, başlık satırı da kalınlıkla değil puntoyla ayrılıyor. */
.hukuk table{
  width:100%;
  margin:0 0 28px;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.5;
}
.hukuk th,
.hukuk td{
  padding:14px 16px 14px 0;
  border-bottom:1px solid #ececE6;
  text-align:left;
  vertical-align:top;
}
.hukuk thead th{
  padding-top:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#73736b;
}
/* Künye tablosunda başlık sütunu solda; dar tutuluyor ki değerler
   hizalansın. */
.hukuk tbody th{
  width:34%;
  font-weight:500;
  color:#6e6e66;
}
.hukuk tr:last-child th,
.hukuk tr:last-child td{ border-bottom:0; }

/* Vurgu kutusu — "bu madde önemli" demek için. Zemin değil, sol kenarda
   tek bir çizgi: sayfanın geri kalanı düz beyaz kalsın. */
.hukuk .kutu{
  margin:0 0 28px;
  padding:4px 0 4px 24px;
  border-left:2px solid #1a1a1a;
}
.hukuk .kutu > *:last-child{ margin-bottom:0; }
.hukuk .kutu table{ margin-bottom:0; }

/* Henüz doldurulmamış işletme bilgisi. Kırmızı, çünkü yayında
   kalmamalı; gözden kaçmasın diye metinden ayrışıyor. */
.hukuk .bos{
  color:#bd4b43;
  font-size:.92em;
}

@media (max-width:640px){
  .hukuk-sayfa .sayfa-bas{ padding:48px 20px 32px; }
  .sayfa-slogan{ margin-top:16px; font-size:16px; }
  .hukuk{
    padding:0 20px 64px;
    font-size:16px;
  }
  .hukuk .guncel{ margin-bottom:40px; }
  .hukuk h2{
    margin:48px 0 14px;
    font-size:21px;
  }
  .hukuk h3{ margin:32px 0 10px; }

  /* Dar ekranda üç-dört sütunlu tablo sığmıyor. Satırlar karta dönüşüyor:
     her hücre kendi başlığını ::before ile yanında taşıyor, böylece
     yatay kaydırma da gerekmiyor. Başlıklar HTML'de data-ad olarak
     yazılı — CSS içerik uydurmuyor. */
  .hukuk thead{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .hukuk tbody tr{
    display:block;
    padding:18px 0;
    border-bottom:1px solid #ececE6;
  }
  .hukuk tbody tr:last-child{ border-bottom:0; }
  .hukuk tbody td{
    display:block;
    padding:0;
    border-bottom:0;
  }
  .hukuk tbody td + td{ margin-top:10px; }
  .hukuk tbody td[data-ad]::before{
    content:attr(data-ad);
    display:block;
    margin-bottom:2px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#73736b;
  }
  /* Künye tablosunun başlık sütunu zaten solda ve dar; onu bozmadan
     aynı dikey düzene sokuyoruz. */
  .hukuk tbody th{
    display:block;
    width:auto;
    padding:0 0 2px;
    border-bottom:0;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#73736b;
  }
  .hukuk .kutu{ padding-left:18px; }
}

/* ── 404 ─────────────────────────────────────────────────────────────
   Yanlış adres. Sayfa boş değil ama dolu da değil: ortada duran kısa
   bir açıklama ve iki çıkış yolu. Kapanış şeridi altta kalsın diye
   asgari yükseklik veriliyor, yoksa kısa içerik alt şeridi ekranın
   ortasına çekiyordu. */
.yok-sayfa{
  min-height:56vh;
  max-width:688px;
  margin:0 auto;
  padding:120px 32px 96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Sayı başlık değil, işaret: küçük ve geri çekilmiş. */
.yok-kod{
  margin:0 0 20px;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  color:#73736b;
}

.yok-sayfa .baslik{ font-size:clamp(28px, 4.4vw, 42px); line-height:1.1; }

.yok-baglar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px 24px;
  margin:36px 0 0;
}

/* Birincil eylem penceredeki düğmeyle aynı dil; burada satır içi. */
.yok-dugme{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:13px 24px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.yok-dugme:hover{ background:#fff; color:#1a1a1a; }

.yok-yan{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  color:#1a1a1a;
  font-size:15px;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.yok-yan:hover{ text-decoration-thickness:2px; }

@media (max-width:640px){
  .yok-sayfa{ padding:72px 20px 64px; }
  .yok-baglar{ margin-top:28px; }
}

/* ── Alıcı bilgisi (ödeme öncesi) ────────────────────────────────────
   Shopier'in imzalı formu fatura için ad, soyad ve telefon istiyor.
   Ayrı bir pencere açmak yerine sayfanın içinde beliriyor: kullanıcı
   hangi paketi seçtiğini arkasında görmeye devam ediyor ve pencere
   içinde pencere sorunu doğmuyor. Ölçü destek formuyla aynı — aynı işi
   yapan iki form farklı görünmesin. */
.alici{
  max-width:520px;
  margin:0 auto;
  padding:0 32px 96px;
}

.alici-baslik{
  margin:0 0 8px;
  font-family:'Inter Tight', -apple-system, "Segoe UI", sans-serif;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
  text-align:center;
}

/* Hangi paketin ödendiği; kullanıcı yanlış düğmeye bastıysa burada fark
   etsin diye tutar da yazılı. */
.alici-paket{
  margin:0 0 28px;
  font-size:15px;
  color:#6e6e66;
  text-align:center;
}

/* Ad ve soyad yan yana; dar ekranda alt alta. */
.alici-ikili{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.alici-ikili .alan + .alan{ margin-top:0; }
.alici-form .alici-ikili + .alan{ margin-top:16px; }

.alici-aciklama{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.55;
  color:#73736b;
}

.alici-hata{
  margin:16px 0 0;
  font-size:14px;
  line-height:1.5;
  color:#bd4b43;
}
.alici-hata:empty{ display:none; }

.alici-eylem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.alici-dugme{
  width:100%;
  margin-top:24px;
  padding:13px 20px;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.alici-dugme:hover{ background:#fff; color:#1a1a1a; }
.alici-dugme[disabled]{ opacity:.5; cursor:default; }

/* "Vazgeç" düğmesinin dokunma hedefi metinden büyük olmalı. */
.alici-eylem .yazi-dugme{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 8px;
}

@media (max-width:640px){
  .alici{ padding:0 20px 64px; }
  .alici-ikili{ grid-template-columns:1fr; gap:0; }
  .alici-ikili .alan + .alan{ margin-top:16px; }
}

/* == erişilebilirlik ve akış ekleri (22.09.2026) == */

/* Görsel olarak gizli, ekran okuyucuya açık — .ikon-yazi ile aynı kalıp. */
.gorunmez{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Dosya girdileri [hidden] ile sekme sırasından çıkıyordu; klavye
   kullanıcısı stüdyonun ilk iki adımına hiç ulaşamıyordu. Girdi görünmez
   ama odaklanabilir, odak sarmalayıcı kutuda gösterilir. */
#fotoGirdi, #sesGirdi{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.yukle:focus-within{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* Kayıt penceresi: koşullar onay kutusu. Yalnızca kayıt kipinde görünür (JS). */
.kosul-satir{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:2px 0 8px;
  font-size:13px;
  line-height:1.45;
}
.kosul-satir input{
  flex:none;
  width:16px; height:16px;
  margin:3px 0 0;
}
.kosul-satir a{ text-decoration:underline; }

/* Hukuk sayfalarında "Bu sayfada" listesi. */
.icindekiler{
  margin:0 0 32px;
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  font-size:14px;
}
.icindekiler-baslik{ margin:0 0 6px; font-weight:600; }
.icindekiler ul{ list-style:none; margin:0; padding:0; }
.icindekiler li{ margin:4px 0; }
.icindekiler a{ text-decoration:underline; }

/* Doğrulama sayfasında düğme olarak çizilen bağ. */
a.destek-dugme{ display:inline-block; text-decoration:none; }

/* Dar ekranda tek kalan küçük parmak hedefi. */
@media (max-width:1000px){
  .yukle-kaldir{ padding:12px 14px; }
}