/* ============================================================
   ALAN ADI SAYFASI — yalnizca bu sayfada yuklenir
   ------------------------------------------------------------
   site.css 94 KB; buradaki bilesenler (uzanti vitrini, yasam
   dongusu, sozluk) baska hicbir sayfada kullanilmiyor. Ayri
   dosyada tutulunca diger sayfalar bu baytlari indirmiyor.

   Renk, olcu ve golge degerleri site.css'teki belirteclerden
   gelir; burada yeni bir renk TANIMLANMAZ — tema degistiginde
   (koyu tema, 10 Kasim temasi) bu bolumler de birlikte doner.
   ============================================================ */

/* ---------- Uzanti vitrini ----------
   Uzantinin "gorseli" uzantinin KENDISIDIR: buyuk puntoyla,
   tek aralikli yazi tipiyle yazilir. Stok fotograf kullanmadik;
   telif yuku ve yuzlerce KB gorsel indirmesi yerine tipografi
   her ekranda net kalir ve marka renklerini birebir tutar. */
.uzv{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
}
.uzv-kart{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.uzv-kart:hover{
  transform:translateY(-3px); border-color:var(--brand);
  box-shadow:var(--shadow-card);
}
/* Kartin ust yarisi: uzanti adinin kendisi gorsel olarak durur. */
.uzv-kart__gorsel{
  display:grid; place-items:center; padding:26px 14px;
  font-family:var(--f-mono); font-size:1.5rem; font-weight:600;
  letter-spacing:-.02em; color:var(--brand);
  background:linear-gradient(150deg, var(--tint), var(--surface-2));
  border-bottom:1px solid var(--line);
}
.uzv-kart--one .uzv-kart__gorsel{
  color:var(--buy-text);
  background:linear-gradient(150deg, var(--buy-soft), var(--tint));
}
.uzv-kart__govde{display:flex; flex-direction:column; gap:7px; padding:15px 16px 16px; flex:1}
.uzv-kart__ad{font-size:.84rem; line-height:1.45; color:var(--text-2)}
.uzv-kart__fiyat{
  font-family:var(--f-display); font-weight:800; font-size:1.12rem;
  color:var(--text); letter-spacing:-.02em; margin-top:auto;
}
.uzv-kart__fiyat small{font-family:var(--f-body); font-weight:500; font-size:.76rem; color:var(--muted)}
.uzv-kart__rozet{
  align-self:flex-start; padding:3px 9px; border-radius:999px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.05em;
  background:var(--green-soft); color:var(--green-text);
  border:1px solid var(--green-soft);
}
/* Belge sarti bir ENGEL degil, bir KOSULDUR: kirmizi/uyari rengi
   yerine notr-sicak ton kullanilir, ziyaretci korkmasin. */
.uzv-kart__rozet--belge{
  background:var(--buy-soft); color:var(--buy-text); border-color:var(--buy-soft);
}

/* Fiyat tablosunda uzanti adi tek aralikli — vitrindeki ile ayni dil. */
.uzt-ad{font-family:var(--f-mono); font-size:1rem; letter-spacing:-.01em}

/* ---------- Alan adi yasam dongusu ----------
   Dort asama soldan saga akar; her asamanin ustunde renkli bir
   cizgi vardir ve renk asama ilerledikce kotulesir (yesil ->
   turuncu -> kirmizi -> gri). Renk tek basina anlam tasimaz;
   asama adi ve metni her zaman yazilidir. */
.dongu{
  display:grid; gap:0;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}
.dongu__asama{position:relative; padding:26px 22px 24px}
.dongu__asama + .dongu__asama{border-left:1px solid var(--line)}
.dongu__cizgi{position:absolute; inset:0 0 auto; height:4px; background:var(--line-2)}
.dongu__asama--aktif    .dongu__cizgi{background:var(--green-lit)}
.dongu__asama--uyari    .dongu__cizgi{background:var(--buy)}
.dongu__asama--kurtarma .dongu__cizgi{background:var(--signal, #C4361F)}
.dongu__asama--serbest  .dongu__cizgi{background:var(--muted)}
.dongu__no{
  display:block; font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.12em; color:var(--muted); margin-bottom:9px;
}
.dongu__asama strong{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:1.04rem; letter-spacing:-.012em; color:var(--text); margin-bottom:7px;
}
.dongu__asama p{margin:0; font-size:.875rem; line-height:1.6; color:var(--text-2)}

/* ---------- Terimler ---------- */
.sozluk{
  display:grid; gap:13px;
  grid-template-columns:repeat(auto-fill, minmax(275px, 1fr));
}
.sozluk__oge{
  padding:18px 19px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
}
.sozluk__oge dfn{
  display:block; font-family:var(--f-mono); font-style:normal; font-weight:600;
  font-size:.9rem; letter-spacing:.02em; color:var(--brand); margin-bottom:6px;
}
.sozluk__oge p{margin:0; font-size:.865rem; line-height:1.6; color:var(--text-2)}

/* ---------- Dar ekran ---------- */
@media (max-width:900px){
  .dongu{grid-template-columns:repeat(2, minmax(0,1fr))}
  .dongu__asama + .dongu__asama{border-left:0}
  .dongu__asama:nth-child(2n){border-left:1px solid var(--line)}
  .dongu__asama:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .uzv{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:11px}
  .uzv-kart__gorsel{padding:20px 10px; font-size:1.2rem}
  .dongu{grid-template-columns:1fr}
  .dongu__asama:nth-child(2n){border-left:0}
  .dongu__asama + .dongu__asama{border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  .uzv-kart{transition:none}
  .uzv-kart:hover{transform:none}
}

/* ---------- Sorgu bolumu (koyu) ----------
   Sayfanin kalbi burasi. Onceden beyaz bir kart icinde etiket + kutu +
   butondu ve sayfadaki diger kartlardan ayrisamiyordu. Koyu zemin,
   sayfanin tek koyu bolumu oldugu icin gozu dogrudan buraya cekiyor.
   Renkler .dc bolumundekiyle ayni ailedendir — site tek bir dil konusur. */
.dara{
  --dara-metin:#EAF3FB; --dara-soluk:#9DB6CC; --dara-vurgu:#5FB8F5;
  position:relative; overflow:hidden; padding-block:62px 66px;
  background:
    radial-gradient(105% 85% at 50% 0%, #123049 0%, transparent 60%),
    linear-gradient(165deg, #0E2A40 0%, #0A2337 55%, #071726 100%);
  color:var(--dara-metin);
}
.dara .wrap{position:relative; z-index:2}
.dara__izgara{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(95,184,245,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,184,245,.09) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 100%);
          mask-image:radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 100%);
}
.dara__ic{max-width:760px; margin-inline:auto; text-align:center}
.dara__baslik{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(1.75rem, 3vw, 2.45rem); line-height:1.1;
  margin:14px 0 0; color:var(--dara-metin);
}
/* Arama alani: ikon + alan + buton TEK bir kontrol gibi durur.
   Kutu yuksekligi 64 px — dokunmatik hedef olarak da rahat. */
.dara__form{
  /* Aradaki paragraf kaldirildi; baslik ile kutu arasindaki bosluk
     paragrafin biraktigi payi karsilayacak sekilde artirildi. */
  display:flex; align-items:center; gap:10px; margin-top:34px;
  padding:7px 7px 7px 18px; border-radius:16px;
  background:var(--surface); border:1px solid rgba(95,184,245,.3);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.85);
}
.dara__form:focus-within{border-color:var(--dara-vurgu); box-shadow:0 0 0 4px rgba(95,184,245,.18)}
.dara__alan{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.dara__ik{display:grid; place-items:center; flex:none; color:var(--muted)}
.dara__ik svg{width:21px; height:21px}
.dara__form input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--f-mono); font-size:1.05rem; color:var(--text);
  padding:16px 0; letter-spacing:-.01em;
}
.dara__form input::placeholder{color:var(--muted); font-family:var(--f-body)}
.dara__btn{
  flex:none; border:0; cursor:pointer; border-radius:11px;
  padding:15px 26px; font-family:var(--f-body); font-weight:700; font-size:.95rem;
  color:#fff; background:linear-gradient(180deg, var(--buy-dolgu), var(--buy-dolgu-koyu));
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7);
  transition:filter .16s ease, transform .16s ease;
}
.dara__btn:hover{filter:brightness(1.08)}
.dara__btn:active{transform:translateY(1px)}

.dara__not{
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  max-width:64ch; margin:24px auto 0;
  font-size:.86rem; line-height:1.6; color:var(--dara-soluk);
}
.dara__not svg{width:19px; height:19px; flex:none; color:var(--dara-vurgu); margin-top:2px}
.dara__not strong{color:var(--dara-metin)}
.dara__not code{
  font-family:var(--f-mono); font-size:.82em; color:var(--dara-vurgu);
  background:rgba(95,184,245,.11); padding:1px 5px; border-radius:5px;
}

@media (max-width:620px){
  .dara{padding-block:44px 48px}
  /* Dar ekranda alan ve buton ALT ALTA. Alan kendi cercevesini ve
     zeminini alir; onceki halinde cercevesiz, ortalanmis bir metindi
     ve tiklanip yazilacak yer oldugu anlasilmiyordu. */
  .dara__form{display:grid; grid-template-columns:1fr; gap:10px; padding:12px}
  .dara__alan{
    border:1px solid var(--line); border-radius:11px;
    background:var(--surface-2); padding-inline:13px;
  }
  .dara__form input{font-size:1rem; padding:14px 0}
  .dara__btn{width:100%; padding:15px 20px}
}
@media (prefers-reduced-motion:reduce){
  .dara__btn{transition:none}
}

/* ---------- Sorgu sonuclari ----------
   Kutu izgarasi yerine HIZALI LISTE. Onceki tasarimda uc sutuna dagilan
   on dort kutu vardi; fiyatlar farkli sutunlarda kaldigi icin
   karsilastirilamiyor, on dort turuncu buton da satin alma renginin
   anlamini tuketiyordu. Simdi fiyatlar alt alta hizalanir ve dolgu
   turuncu yalnizca onerilen uzantilarda kullanilir. */
/* Bolum bos iken sifir yukseklik; dolgu sonuc kutusuyla birlikte gelir. */
.sec--sonuc{padding-block:0}
.dres-box{display:none}
.dres-box.is-on{display:block; padding-block:44px}

/* --- Ozet seridi --- */
.dozet{
  display:flex; align-items:center; gap:12px;
  padding:15px 20px; margin-bottom:14px;
  border:1px solid var(--green-soft); border-radius:var(--radius);
  background:var(--green-soft);
}
.dozet__sayi{
  display:grid; place-items:center; flex:none; min-width:38px; height:38px;
  padding-inline:9px; border-radius:10px; background:var(--green); color:#fff;
  font-family:var(--f-display); font-weight:800; font-size:1.15rem;
}
.dozet__metin{font-size:.92rem; line-height:1.5; color:var(--green-text)}

/* --- Satir listesi --- */
.dliste{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.dliste--sonuk{opacity:.92}

/* Alinmis uzantilar seridi — musait seridinin gri esi.
   h3 olarak cizilir; baslik yazi tipi burada istenmez, sifirlanir. */
.dozet--alinmis{
  margin:34px 0 14px;
  border-color:var(--line-2); background:var(--surface-2);
  font-family:var(--f-body); font-size:1rem; font-weight:400;
  letter-spacing:normal; line-height:1.5;
}
.dozet--alinmis .dozet__sayi{background:var(--muted); color:#fff}
.dozet--alinmis .dozet__metin{color:var(--text-2)}
.dozet--alinmis b{color:var(--text); font-weight:700}

.dsat{
  display:grid; align-items:center; gap:14px;
  /* Durum, fiyat ve eylem sutunlari SABIT genisliktedir. Her satir kendi
     izgarasi oldugu icin "auto" birakilsaydi sutunlar satirdan satira
     kayar, fiyatlar alt alta hizalanmazdi — listenin tum amaci fiyatlarin
     karsilastirilabilmesiydi. Degisken olan yalnizca ad ve etiket
     sutunlaridir; farki 1fr olan ad sutunu yutar. */
  grid-template-columns:minmax(0,1fr) auto 104px 128px minmax(122px,auto);
  padding:15px 18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.dsat--musait:hover{border-color:var(--brand); box-shadow:var(--shadow-card)}
/* Onerilen uzanti: sol kenarda serit + hafif zemin. Renk tek basina anlam
   tasimaz — yaninda "Önerilen" etiketi her zaman yazilidir. */
.dsat--one{background:var(--tint); box-shadow:inset 3px 0 0 var(--brand)}
.dsat--one:hover{background:var(--tint)}
.dsat--dolu,.dsat--bilinmiyor{background:var(--surface-2); border-style:dashed}

.dsat__ad{
  font-family:var(--f-mono); font-size:1.08rem; font-weight:600;
  letter-spacing:-.015em; color:var(--text); word-break:break-all;
}
.dsat__ad .uz{color:var(--brand); font-weight:700}
.dsat--dolu .dsat__ad,.dsat--bilinmiyor .dsat__ad{color:var(--muted)}
.dsat--dolu .dsat__ad .uz{color:var(--muted)}

.dsat__etler{display:flex; gap:6px; flex-wrap:wrap}
.dsat__et{
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.05em;
}
.dsat__et--one{background:var(--brand-soft); color:var(--brand-deep)}
.dsat__et--belge{background:var(--buy-soft); color:var(--buy-text)}

.dsat__durum{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}
.dsat__durum::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.dsat__durum--musait{color:var(--green-text)}
.dsat__durum--dolu{color:var(--muted)}
.dsat__durum--yok{color:var(--buy-text)}

.dsat__fiyat{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.2;
  text-align:right; white-space:nowrap;
}
.dsat__fiyat b{font-family:var(--f-display); font-weight:800; font-size:1.08rem; color:var(--text)}
.dsat__fiyat small{font-size:.72rem; color:var(--muted); margin-top:3px}
.dsat__fiyat--sade{font-size:.84rem; color:var(--muted); font-weight:600}

.dsat__eylem{display:flex; gap:8px; justify-content:flex-end}
.dsat__al{
  flex:none; cursor:pointer; white-space:nowrap;
  padding:9px 17px; border-radius:9px; border:1px solid var(--buy-line);
  background:var(--buy-dolgu); color:#fff;
  font-size:.83rem; font-weight:700;
  transition:background .16s ease, color .16s ease;
}
.dsat__al:hover{background:var(--buy-dolgu-koyu); color:#fff}
.dsat__al:active{transform:translateY(1px)}
.dsat__al:disabled{opacity:.6; cursor:default}
/* Onerilmeyen uzantilarda cerceveli; uzerine gelince dolar. Boylece
   sayfada on dort dolgu turuncu buton olusmuyor. */
.dsat__al--cizgi{background:transparent; color:var(--buy-text)}
.dsat__al--cizgi:hover{background:var(--buy-dolgu); color:#fff}

.dsat__ikincil{
  flex:none; cursor:pointer; white-space:nowrap;
  padding:9px 13px; border-radius:9px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-size:.8rem; font-weight:700;
}
.dsat__ikincil:hover{color:var(--brand-deep); border-color:var(--brand-deep)}
.dsat__ikincil:disabled{opacity:.55; cursor:default}

.dsat__whois{
  grid-column:1/-1; margin-top:4px; padding-top:12px;
  border-top:1px solid var(--line); font-size:.83rem; color:var(--text-2);
}

/* --- Yukleniyor / hata --- */
.dbilgi{
  display:flex; align-items:center; gap:11px;
  padding:18px 20px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
  font-size:.92rem; color:var(--text-2);
}
.dbilgi--hata{border-color:var(--buy-line); background:var(--buy-soft); color:var(--buy-text)}

@media (max-width:860px){
  /* Dar ekranda satir iki kademeye iner: ust satirda ad ve durum,
     alt satirda fiyat ve eylem. */
  .dsat{grid-template-columns:1fr auto; gap:10px 12px}
  .dsat__ad{grid-column:1; grid-row:1}
  .dsat__durum{grid-column:2; grid-row:1; justify-self:end}
  .dsat__etler{grid-column:1/-1; grid-row:2}
  .dsat__fiyat{grid-column:1; grid-row:3; align-items:flex-start; text-align:left}
  .dsat__eylem{grid-column:2; grid-row:3}
}
@media (max-width:460px){
  .dsat__eylem{grid-column:1/-1; grid-row:4; justify-content:stretch}
  .dsat__eylem button{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .dsat,.dsat__al{transition:none}
}