/* Bu blok wt.css'in tepesindekinin AYNISI. Sihirbaz sayfalari wt.css
   yuklemiyor; ayri bir yazitipi.css baglamak ise acilis yolunda bir
   istek daha demek olurdu. Ikisi birlikte degistirilmeli. */
/* ── Yazı tipleri: KENDİ sunucumuzdan ─────────────────────────────────
   Önceden Google Fonts'tan geliyordu. Ölçüm (PageSpeed, mobil, yavaş 4G)
   şunu gösterdi: sayfa Google'ın stil dosyasını indirene kadar HİÇ
   boyanmıyordu — ilk boyama 3,3 sn, tahmini kayıp 2.770 ms. Üstelik
   Google 37 ayrı @font-face basıyor (her alfabe için bir tane).

   Şimdi üç aile de kendi sunucumuzda, tek dosya hâlinde. Değişken
   (variable) yazı tipleri; opsz/wdth eksenleri sabitlenip yalnızca
   kalınlık ekseni bırakıldı ve karakter kümesi Türkçe + Batı Avrupa
   ile sınırlandı: 208 KB -> 99 KB, 6 istek -> 3 istek, dış bağlantı yok.

   Kaynak: Google Fonts, SIL Open Font License 1.1 (yeniden dağıtım serbest).
   Yeniden üretmek gerekirse yöntem KARARLAR.md'de yazılı.

   font-display: swap — yazı tipi gecikirse metin görünmez olmasın.
   Zıplamayı (CLS) ölçü uyumlu yedek tanımları engelliyor, aşağıda. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken.woff2") format("woff2-variations"),
       url("/fonts/hanken.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff2") format("woff2-variations"),
       url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains.woff2") format("woff2-variations"),
       url("/fonts/jetbrains.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ── Ölçü uyumlu yedekler ────────────────────────────────────────────
   Asıl yazı tipi gelene kadar sistem yazı tipi görünüyor. İkisinin harf
   genişliği ve satır yüksekliği farklı olduğu için, yazı tipi gelince
   bütün metin yeniden diziliyor ve sayfa zıplıyordu (CLS 0,841 — Google'ın
   "iyi" eşiği 0,1).

   Aşağıdaki tanımlar yedek yazı tipini asıl yazı tipinin ölçülerine
   esnetiyor: size-adjust genişliği, ascent/descent satır yüksekliğini
   eşitliyor. Böylece takas anında sayfa yerinden oynamıyor.

   Oranlar tarayıcıda ölçüldü (Arial'a göre); yazı tipi değişirse
   yeniden ölçülmeli. */
@font-face {
  font-family: "Hanken Yedek";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 98.14%;
  ascent-override: 101.9%;
  descent-override: 30.87%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Yedek";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 100.98%;
  ascent-override: 92.1%;
  descent-override: 26.74%;
  line-gap-override: 0%;
}

/* Sihirbaz — mavi/beyaz kimlik.
   Ana sitedeki mor (wt.css) buraya karışmıyor: sihirbaz kendi
   değişkenleriyle çalışıyor ki iki tasarım birbirini bozmasın. */

.sihirbaz {
  --mavi: #1668ff;
  --mavi-koyu: #0b4fd1;
  --murekkep: #0a1b3d;
  --pus: #eef4ff;
  --cizgi: #d7e2f5;
  --metin: #414f6b;
  --soluk: #78859c;
  --zemin: #ffffff;
  --zemin-2: #f7f9fd;
  --ok: #0e9f6e;      --ok-z: #e6f7f0;    --ok-k: #a3e0c8;
  --uyari: #d98a00;   --uyari-z: #fdf4e3;  --uyari-k: #f7d89c;
  --hata: #e02424;    --hata-z: #fdecec;   --hata-k: #f8b4b4;

  --f-baslik: "Bricolage Grotesque", "Bricolage Yedek", "Segoe UI", system-ui, sans-serif;
  /* Stitch token listesi Instrument Sans yerine Hanken Grotesk secti:
     Turkce diakritikleri (g u s i o c) daha tutarli oturuyor. */
  --f-govde: "Hanken Grotesk", "Hanken Yedek", "Segoe UI", system-ui, sans-serif;
  --f-kod: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r: 10px;
  --r-kart: 14px;

  background: var(--zemin-2);
  color: var(--metin);
  font-family: var(--f-govde);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
}

.sihirbaz *, .sihirbaz *::before, .sihirbaz *::after { box-sizing: border-box; }
.sihirbaz :focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; border-radius: 4px; }
.sihirbaz a { color: var(--mavi-koyu); }

/* ── Üst çubuk ───────────────────────────────────────────────── */
.sh-ust {
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  padding: 0 clamp(16px, 4vw, 32px);
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sh-marka {
  font-family: var(--f-baslik);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--murekkep);
  text-decoration: none;
}
.sh-sure { flex: 1; text-align: center; font-size: 13px; color: var(--soluk); }
.sh-cik { font-size: 13.5px; color: var(--soluk); text-decoration: none; }
.sh-cik:hover { color: var(--mavi-koyu); }

/* ── Adım göstergesi ─────────────────────────────────────────── */
.sh-adimlar {
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  padding: 20px clamp(16px, 4vw, 32px) 22px;
}
.sh-ray {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.sh-dugum { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; width: 34px; }
.sh-yuvar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-kod); font-size: 12.5px;
  background: var(--zemin-2); border: 1px solid var(--cizgi); color: var(--soluk);
}
.sh-dugum.bitti  .sh-yuvar { background: var(--mavi); border-color: var(--mavi); color: #fff; }
.sh-dugum.simdi  .sh-yuvar { background: var(--zemin); border: 2px solid var(--mavi); color: var(--mavi); font-weight: 500; }
.sh-etiket {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mavi-koyu); white-space: nowrap;
}
.sh-cizgi { flex: 1; height: 2px; background: var(--cizgi); margin-top: 14px; }
.sh-cizgi.dolu { background: var(--mavi); }

/* Telefonda düğümler sığmıyor; tek çubuk ve yazı kalıyor. */
.sh-mobil { display: none; max-width: 900px; margin: 0 auto; }
.sh-mobil-bar { height: 4px; background: var(--cizgi); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.sh-mobil-bar span { display: block; height: 100%; background: var(--mavi); }
@media (max-width: 760px) {
  .sh-ray { display: none; }
  .sh-mobil { display: block; }
  .sh-sure { display: none; }
}

/* ── Gövde ───────────────────────────────────────────────────── */
.sh-govde { padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 32px) 80px; }
.sh-kap { max-width: 760px; margin: 0 auto; }
.sh-kap.genis { max-width: 1080px; }

.sh-ikili { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 940px) { .sh-ikili { grid-template-columns: minmax(0, 1fr); } }

.sh-kart {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  padding: clamp(20px, 4vw, 32px);
}
.sh-goz { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--soluk); margin: 0 0 8px; }
.sh-kart h1 {
  font-family: var(--f-baslik); font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  letter-spacing: -.02em; color: var(--murekkep);
  margin: 0 0 6px; text-wrap: balance;
}
.sh-lede { margin: 0 0 24px; color: var(--soluk); font-size: 14.5px; }

/* ── Alanlar ─────────────────────────────────────────────────── */
.sh-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .sh-izgara { grid-template-columns: 1fr; } }
.sh-alan { display: flex; flex-direction: column; gap: 6px; }
.sh-alan.tam { grid-column: 1 / -1; }
.sh-alan > label { font-size: 13px; font-weight: 500; color: var(--murekkep); }
.sh-alan .zor { color: var(--mavi); }
.sh-yardim { font-size: 12.5px; color: var(--soluk); }

.sh-girdi {
  width: 100%; min-height: 44px;
  padding: 10px 13px;
  font-family: inherit; font-size: 15px; color: var(--murekkep);
  background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: var(--r);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.sh-girdi { min-height: 104px; resize: vertical; line-height: 1.55; }
.sh-girdi::placeholder { color: var(--soluk); }
.sh-girdi:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 2px rgba(22,104,255,.15); }
.sh-girdi.mono { font-family: var(--f-kod); font-size: 15px; }
.sh-girdi[aria-invalid="true"] { border-color: var(--hata); }
.sh-hata { font-size: 12.5px; color: var(--hata); }
.sh-sayac { font-family: var(--f-kod); font-size: 11.5px; color: var(--soluk); text-align: right; }

/* ── Seçim kartları ve satırları ─────────────────────────────── */
.sh-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px), 1fr)); gap: 12px; }
.sh-sec {
  position: relative; display: block; cursor: pointer;
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart); padding: 16px 18px;
  transition: border-color .15s ease, background .15s ease;
}
.sh-sec:hover { border-color: #b9cdec; }
.sh-sec input { position: absolute; opacity: 0; pointer-events: none; }
.sh-sec-ad { display: block; font-weight: 600; font-size: 15px; color: var(--murekkep); }
.sh-sec-alt { display: block; font-size: 13px; color: var(--soluk); margin-top: 3px; }
.sh-sec-fiyat { display: block; font-family: var(--f-kod); font-size: 15px; color: var(--murekkep); margin-top: 10px; }
.sh-sec:has(input:checked) { border: 1.5px solid var(--mavi); background: var(--pus); padding: 15.5px 17.5px; }
.sh-sec:has(input:checked)::after {
  content: "✓"; position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mavi); color: #fff; font-size: 12px;
  display: grid; place-items: center;
}

.sh-satirlar { border-top: 1px solid var(--cizgi); }
.sh-satir {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--cizgi);
  cursor: pointer; position: relative;
}
.sh-satir input[type=checkbox], .sh-satir input[type=radio] {
  width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--mavi);
}
.sh-satir-govde { flex: 1; min-width: 0; }
.sh-satir-ad { font-size: 15px; color: var(--murekkep); }
.sh-satir-alt { font-size: 13px; color: var(--soluk); }
.sh-satir-sag { flex: none; text-align: right; }
.sh-satir:has(input:checked) { background: var(--pus); box-shadow: inset 3px 0 0 var(--mavi); }

.sh-rozet { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.sh-rozet.dahil { background: var(--ok-z); color: var(--ok); border: 1px solid var(--ok-k); }
.sh-rozet.ucret { font-family: var(--f-kod); background: var(--pus); color: var(--mavi-koyu); font-variant-numeric: tabular-nums; }

/* ── Palet ve şablon ─────────────────────────────────────────── */
.sh-palet-serit { display: flex; height: 52px; border-radius: 8px 8px 0 0; overflow: hidden; }
.sh-palet-serit span { flex: 1; }
.sh-sec.palet { padding: 0; overflow: hidden; }
.sh-sec.palet .alt { padding: 9px 12px 11px; }
.sh-sec.palet:has(input:checked) { padding: 0; border-width: 1.5px; }
.sh-tel { display: block; font-family: var(--f-kod); font-size: 11px; color: var(--soluk); }

/* ── Şablon kartları ─────────────────────────────────────────────
   Kart artık adı değil, sitenin kendisini gösteriyor. Çerçevenin
   içindeki iframe kartın dört katı genişlikte açılıp %25'e küçültülüyor;
   böylece masaüstü düzeni görünüyor ama kart dar kalıyor. */
.sh-sablonlar {
  display: grid; gap: 14px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sh-sablon {
  position: relative; display: block; cursor: pointer; overflow: hidden;
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sh-sablon:hover { border-color: #b9cdec; box-shadow: 0 8px 22px -10px rgba(10,27,61,.28); }
.sh-sablon input { position: absolute; opacity: 0; pointer-events: none; }
.sh-sablon-goz {
  display: block; position: relative; height: 210px; overflow: hidden;
  background: var(--zemin-2); border-bottom: 1px solid var(--cizgi);
}
.sh-sablon-cerceve {
  width: 400%; height: 400%; border: 0; display: block;
  transform: scale(.25); transform-origin: 0 0; pointer-events: none;
}
.sh-sablon-alt { display: block; padding: 13px 15px 15px; }
.sh-sablon:has(input:checked) { border: 1.5px solid var(--mavi); }
.sh-sablon:has(input:checked) .sh-sablon-alt { background: var(--pus); }
.sh-sablon:has(input:checked)::after {
  content: "✓"; position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--mavi); color: #fff; font-size: 13px;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(10,27,61,.3);
}

.sh-tel-onizleme { display: flex; align-items: center; gap: 12px; }
.sh-renk-yuvar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cizgi); flex: none; }

/* ── Özet kartı ──────────────────────────────────────────────── */
.sh-ozet {
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart); padding: 20px;
  box-shadow: 0 8px 24px -4px rgba(10,27,61,.08);
  position: sticky; top: 20px;
}
.sh-ozet h2 { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--soluk); margin: 0 0 14px; font-weight: 500; }
.sh-ozet-satir { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; }
.sh-ozet-satir .ad { color: var(--metin); min-width: 0; }
.sh-ozet-satir .tut { font-family: var(--f-kod); color: var(--murekkep); font-variant-numeric: tabular-nums; flex: none; }
.sh-ozet hr { border: 0; border-top: 1px solid var(--cizgi); margin: 12px 0; }
.sh-ozet .toplam { align-items: baseline; }
.sh-ozet .toplam .tut { font-family: var(--f-baslik); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
.sh-ozet-not { font-size: 12px; color: var(--soluk); margin: 12px 0 0; }

/* ── Bilgi şeritleri ─────────────────────────────────────────── */
.sh-serit { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); font-size: 13.5px; margin-bottom: 20px; }
.sh-serit.bilgi { background: var(--pus); color: var(--metin); }
.sh-serit.uyari { background: var(--uyari-z); color: #7a4f00; }
.sh-serit.iyi   { background: var(--ok-z); color: #0a6b4a; }
.sh-serit b { color: var(--murekkep); }

/* ── Alt çubuk ───────────────────────────────────────────────── */
.sh-alt {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cizgi);
}
.sh-kayit { flex: 1; font-size: 12px; color: var(--soluk); text-align: center; }
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.sh-btn.birincil { background: var(--mavi); color: #fff; }
.sh-btn.birincil:hover { background: var(--mavi-koyu); }
.sh-btn.hayalet { background: transparent; color: var(--metin); border-color: var(--cizgi); }
.sh-btn.hayalet:hover { background: var(--zemin-2); }
.sh-btn.tam { width: 100%; }
.sh-btn.buyuk { min-height: 48px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) { .sihirbaz * { transition: none !important; } }

/* ── Alan adı müsaitliği ────────────────────────────────────────────────
   Işık kutunun içinde, sonuç altında. Yeşil metin --ok'tan değil ayrı bir
   tondan: #0e9f6e beyaz üstünde 3:1 kalıyor, yazı için AA'yı geçmiyor. */
.alan-kutu { position: relative; display: block; }
.alan-kutu .sh-girdi { padding-right: 40px; }

.alan-isik {
  position: absolute; right: 13px; top: 50%; width: 10px; height: 10px;
  margin-top: -5px; border-radius: 50%; background: transparent;
  transition: background .15s;
}
.alan-isik.musait { background: var(--ok); }
.alan-isik.dolu { background: var(--hata); }
.alan-isik.bilinmiyor { background: var(--uyari); }
.alan-isik.bekliyor {
  background: var(--cizgi);
  animation: alan-nabiz 1s ease-in-out infinite;
}
@keyframes alan-nabiz { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .alan-isik.bekliyor { animation: none; } }

.alan-sonuc {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--soluk);
  min-height: 18px;   /* sonuç gelince satır kaymasın (CLS) */
}
.alan-sonuc.musait { color: #076c4b; font-weight: 600; }
.alan-sonuc.dolu { color: var(--hata); }
.alan-sonuc.bilinmiyor { color: #8a5800; }

.alan-oneri { margin-top: 9px; }
.alan-oneri-bas { display: block; font-size: 12px; color: var(--soluk); margin-bottom: 6px; }
.alan-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.alan-cip {
  font: 600 12.5px/1 var(--f-kod); color: #076c4b; cursor: pointer;
  background: var(--ok-z); border: 1px solid var(--ok-k);
  border-radius: 999px; padding: 7px 12px; min-height: 30px;
}
.alan-cip:hover { background: #d7f2e6; }
.alan-cip:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }