@import url("/assets/font/_fontface.css");

/* =========================================================================
   sakaryadis.net — Sakarya Özel Diş Kliniği
   Arketip: ÜRÜN DUVARI (katalog 039). Kahraman bandı YOK; sayfa doğrudan
   "klinik duvarı" ile açılıyor. Gerekçe site.php'de.
   Palet eski sitenin kendi satır içi style bloğundan örneklendi.
   ========================================================================= */

:root{
  --kirmizi:#ee1c25;        /* markanın kendi kırmızısı (eski site) */
  --kirmizi-koyu:#d40f17;   /* beyaz yazı taşıyan yüzeyler — kontrast 5.41 */
  --lacivert:#014a8d;       /* markanın kendi lacivert'i — beyazda 8.88 */
  --lacivert-koyu:#013358;  /* koyu panel — beyazda 13.00 */
  --zemin:#eff7ff;          /* eski sitenin açık mavisi */
  --beyaz:#fff;
  --metin:#1b2733;          /* zemin üstünde 14.02 */
  --ikincil:#5b6b7a;        /* beyazda 5.48 */
  --cizgi:#d7e6f4;
  --olcu:1180px;
  --dar:860px;
  --bosluk:10px;
  --golge:0 1px 2px rgba(1,51,88,.07),0 8px 24px rgba(1,51,88,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font:400 clamp(15px,1.05vw,16.5px)/1.65 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--lacivert);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Poppins,system-ui,Arial,sans-serif;font-weight:700;line-height:1.18;margin:0 0 .5em;color:var(--lacivert-koyu)}
h1{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.015em}
h2{font-size:clamp(22px,2.5vw,32px);letter-spacing:-.01em}
h3{font-size:clamp(17px,1.5vw,20px)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--kirmizi);outline-offset:2px;border-radius:4px}

.kapsa{width:min(100% - 32px,var(--olcu));margin-inline:auto}
.kapsa-dar{width:min(100% - 32px,var(--dar));margin-inline:auto}
.atla{position:absolute;left:-9999px;min-height:44px;display:inline-flex;align-items:center}
.atla:focus{left:12px;top:12px;z-index:60;background:var(--beyaz);display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--lacivert);border-radius:10px;font-weight:700}

/* ---------------------------------------------------------------- ikonlar
   🔴 ÖLÇÜ CSS'TE. wa_ikonu() yalnız viewBox taşıyor; ölçüsüz SVG flex
   kabında devasa büyüyor (adademirhan'da 260 px'e çıkmıştı). */
.dugme svg,.yuzen a svg,.alt-wa svg,.menu-randevu svg,.daha svg{
  width:20px;height:20px;flex:none;fill:currentColor
}
.ikon-cizgi{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- imza
   Logodaki kırmızı fırça vuruşu, bölüm başlıklarının altında tekrar ediyor. */
.firca{display:block;width:clamp(92px,11vw,132px);height:11px;margin-top:9px;fill:var(--kirmizi)}

/* ---------------------------------------------------------------- başlık */
.ust{position:sticky;top:0;z-index:40;background:var(--beyaz);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;gap:16px;min-height:66px;padding:8px 0}
/* 🔴 LOGO İKİ PARÇA (2026-10-14): firmanın kendi dişi + GERÇEK METİN.
   Tek parça 320x90 PNG retinada bulanıklaşıyordu ve en çok yazı
   bozuluyordu. Yazı artık metin — her ölçüde net. Renkler markanın
   kendi paletinden, uydurulmadı. */
.logo{flex:none;display:flex;align-items:center;gap:9px;text-decoration:none}
.logo-dis{width:clamp(38px,4.4vw,52px);height:auto;flex:none}
.logo-yazi{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.logo-ust{
  font-size:clamp(11px,1.15vw,14px);
  font-weight:500;letter-spacing:.015em;
  color:var(--lacivert);opacity:.9;
}
.logo-alt{
  font-size:clamp(16px,1.95vw,24px);
  font-weight:600;letter-spacing:-.01em;
  color:var(--lacivert);white-space:nowrap;
}
/* Soyadı özgün logoda da büyük harf ve daha kalın. */
.logo-alt b{font-weight:800}
.masa{display:none;margin-left:auto;align-items:center;gap:clamp(8px,1.1vw,18px);flex-wrap:wrap}
.masa a{
  color:var(--lacivert-koyu);font-weight:600;font-size:clamp(13px,.95vw,15px);
  display:inline-flex;align-items:center;min-width:44px;min-height:44px;justify-content:center;
  padding:0 7px;border-bottom:3px solid transparent
}
.masa a[aria-current]{border-bottom-color:var(--kirmizi)}
.masa .menu-randevu{
  background:var(--kirmizi-koyu);color:#fff;border-radius:999px;
  padding:11px 20px;border-bottom:0;min-height:44px;display:inline-flex;align-items:center
}
.masa .menu-randevu:hover{background:var(--kirmizi);text-decoration:none}

.mob{margin-left:auto;position:relative}
.mob>summary{
  list-style:none;cursor:pointer;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;gap:9px;padding:0 14px;border-radius:999px;
  background:var(--lacivert-koyu);color:#fff;font-weight:700;font-size:14px
}
.mob>summary::-webkit-details-marker{display:none}
.mob>summary>span{width:17px;height:2px;background:#fff;box-shadow:0 -6px 0 #fff,0 6px 0 #fff;flex:none}
.mob nav{
  position:absolute;right:0;top:calc(100% + 9px);width:min(78vw,280px);
  background:var(--beyaz);border:1px solid var(--cizgi);border-radius:14px;
  box-shadow:var(--golge);padding:6px;display:grid
}
.mob nav a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:9px;color:var(--lacivert-koyu);font-weight:600}
.mob nav a:hover{background:var(--zemin);text-decoration:none}
@media (min-width:1000px){ .mob{display:none} .masa{display:flex} }

/* ================================================================= DUVAR
   🔴 SÜTUN SAYISI VE SATIR SAYISI KIRILIM BAŞINA SABİT, SATIR YÜKSEKLİĞİ
   SABİT — ızgara her kırılımda TAM KAPANIR (Üçaymak dersi: auto-fill +
   span'li panel delikli duvar üretiyor).

   🔴 ÜÇ PANEL (büyük kare, marka, randevu) AÇIKÇA YERLEŞTİRİLİR
   (`grid-area`), geri kalan 12 göz 1x1 olarak kendiliğinden akar. Span'li
   bir ögeyi akışa bırakmak, satırın kalanına sığmadığında o satırı boş
   bırakıyor; açık yerleşimde bu imkânsız.

   Hücre bütçesi:
     ≥1000px  6 sütun × 4 satır = 24 : büyük 3x2(6) + marka 4x1(4)
                                       + randevu 2x1(2) + 12 adet 1x1
      700px   4 sütun × 6 satır = 24 : büyük 2x2(4) + marka 4x1(4)
                                       + randevu 4x1(4) + 12 adet 1x1
      <700px  2 sütun × 13 satır = 26: büyük 2x4(8) + randevu 2x1(2)
                                       + marka 2x2(4) + 12 adet 1x1
   ⚠️ Telefon yerleşimi İKİ KEZ ÖLÇÜMLE DÜZELTİLDİ:
     1) Marka gözü önce 1 satırdı; içeriği 113 px, kabı 101 px çıktı
        (taşıyor, `overflow:hidden` kırpıyordu) → 2 satır.
     2) Marka ilk ekrana girince görsel oranı %45.7'ye düştü (hedef ≥%50).
        Marka 8. satıra indirildi, araya iki sıra fotoğraf girdi → %65.9.

   🔴 TELEFONDA SIRA FOTOĞRAFLA BAŞLAR (Ö13): büyük kare ilk üç satırı
   kaplıyor, metin panelleri onun altında. */
.duvar{
  display:grid;gap:var(--bosluk);margin:18px 0 0;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:clamp(100px,27vw,130px);
}
.goz{position:relative;overflow:hidden;border-radius:16px;background:#dce9f5;display:block}
/* 🔴 SEÇİCİ DAR TUTULDU. `.goz img` yazılmıştı ve marka panelindeki LOGOYU da
   yakalıyordu: `.goz img` (0,1,1) `.duvar-logo` (0,1,0)'ı özgüllükte yener,
   logo 320 px kaynaktan 586 px'e gerildi (büyütme 1.83, eşik 1.15) ve
   `object-fit:cover` kenarlarını kırpıyordu. Düzeltmenin yeri seçicinin
   KENDİSİ — sonradan yazılan bir geri alma kuralı değil (AGENTS.md). */
.goz-foto img,.goz-buyuk img{width:100%;height:100%;object-fit:cover}
.goz figcaption{
  position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);
  background:rgba(255,255,255,.93);color:var(--lacivert-koyu);
  font-size:12px;font-weight:600;line-height:1.3;padding:5px 9px;border-radius:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

.goz-buyuk{grid-area:1 / 1 / 5 / 3}
.goz-buyuk figcaption{font-size:13px;padding:7px 12px}

.goz-marka{
  grid-area:8 / 1 / 10 / 3;
  background:var(--lacivert-koyu);color:#fff;display:flex;align-items:center;
  gap:14px;padding:10px 16px
}
.goz-marka .sl{margin:0;color:#fff;font-family:Poppins,sans-serif;font-weight:700;
  font-size:clamp(14px,1.5vw,21px);line-height:1.2;letter-spacing:-.01em}
.goz-marka .alt{display:block;font-family:Inter,sans-serif;font-weight:400;
  font-size:12.5px;opacity:.86;margin-top:3px;line-height:1.35}

.goz-randevu{
  grid-area:5 / 1 / 6 / 3;
  background:var(--kirmizi);color:#fff;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:10px 16px
}
.goz-randevu:hover{background:var(--kirmizi-koyu);text-decoration:none}
.goz-randevu b{font-family:Poppins,sans-serif;font-size:clamp(15px,1.5vw,20px);display:block}
.goz-randevu i{font-style:normal;font-size:13px;opacity:.95;display:block}
.goz-randevu svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2}

.goz-kapi{
  background:var(--beyaz);color:var(--lacivert-koyu);display:flex;flex-direction:column;
  justify-content:center;padding:12px 14px;border:2px solid var(--lacivert)
}
.goz-kapi:hover{background:var(--lacivert);color:#fff;text-decoration:none}
.goz-kapi b{font-family:Poppins,sans-serif;font-size:clamp(14px,1.2vw,17px)}
.goz-kapi i{font-style:normal;font-size:12.5px;opacity:.8}

@media (min-width:700px){
  .duvar{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(128px,19.5vw,168px)}
  .goz-buyuk{grid-area:1 / 1 / 3 / 3}
  .goz-marka{grid-area:3 / 1 / 4 / 5;padding:14px 22px}
  .goz-randevu{grid-area:5 / 1 / 6 / 5;padding:14px 22px}
}
@media (min-width:1000px){
  .duvar{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(140px,13.7vw,190px)}
  /* 🔴 BAŞ FOTOĞRAF GENİŞLETİLDİ (kullanıcı 2026-10-14: *"resim yayılsa
     sanki daha iyi olurdu"*). 3 sütundan 4'e çıktı; ilk ekranda görselin
     payı artıyor, klinik karesi vitrin gibi duruyor.
     🔴 IZGARA TAM KAPANMALI: büyük kare 4x2 = 8 hücre, ilk iki satır
     6x2 = 12, yani yanına 4 küçük kare sığıyor (önce 6 sığıyordu).
     Fazla kare gizlenmezse ızgarada delik açılır — boşluk ÖLÇÜLDÜ. */
  .goz-buyuk{grid-area:1 / 1 / 3 / 5}
  .goz-marka{grid-area:3 / 1 / 4 / 5}
  .goz-randevu{grid-area:3 / 5 / 4 / 7}
  /* ÖNCE SIFIRLA, SONRA GİZLE — alt kırılımın gizlemesi üste taşmasın
     (AGENTS: "alt kırılım üstteki display:none'ı geri alamaz"). */
  .duvar > .goz-foto{display:block}
  .duvar > .goz-foto:nth-of-type(n+11){display:none}
}

/* 🔴 BEYAZ PLAKA KALKTI (2026-10-14). Lacivert panelde beyaz bir kutu
   yama gibi duruyordu; logo artık panelin kendi diliyle yazılıyor. */
.duvar-logo{display:flex;align-items:center;gap:10px;flex:none}
.duvar-logo img{width:clamp(42px,4.6vw,58px);height:auto;flex:none}
.duvar-logo-yazi{display:flex;flex-direction:column;line-height:1.05}
.duvar-logo-yazi .logo-ust{color:#cfe2f2;opacity:1;font-size:clamp(11px,1.1vw,13px)}
.duvar-logo-yazi .logo-alt{color:#fff;font-size:clamp(17px,1.8vw,22px)}

/* ---------------------------------------------------------------- bölümler */
.bolum{padding:clamp(34px,4.6vw,62px) 0}
.bolum-beyaz{background:var(--beyaz)}
.bolum-bas{margin-bottom:clamp(18px,2.2vw,30px)}
.ust-etiket{
  margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--kirmizi-koyu)
}
.bolum-bas h2{margin-bottom:0}
.bolum-alt{margin:12px 0 0;max-width:66ch;color:var(--ikincil)}

/* ---------------------------------------------------------------- kartlar
   🔴 IZGARA KENDİ SARAR — sütun sayısını elle saymak her yeni ekranda bozulur. */
.izgara{display:grid;gap:clamp(12px,1.5vw,20px);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.izgara-genis{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.kart{
  display:flex;flex-direction:column;background:var(--beyaz);border-radius:16px;
  overflow:hidden;box-shadow:var(--golge);color:var(--metin);
  transition:transform .18s ease,box-shadow .18s ease
}
.kart:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(1,51,88,.08),0 16px 34px rgba(1,51,88,.14);text-decoration:none}
/* 🔴 `<a>` içindeki `<span>` BLOK YAPILIR: satır içi kalırsa dikey dolgu hiç
   uygulanmaz, metin kenara yapışır ve üst çizgi güdük çıkar. */
.kart-kare{display:block;width:100%;background:#dce9f5}
.kart-kare img{width:100%;height:100%;object-fit:cover}
.kart .govde{display:block;padding:15px 17px 17px}
.kart .govde b{display:block;font-family:Poppins,sans-serif;font-size:17px;line-height:1.3;color:var(--lacivert-koyu)}
.kart .govde em{display:block;font-style:normal;margin-top:7px;color:var(--ikincil);font-size:14.5px;line-height:1.55}
.kart .daha{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-style:normal;font-weight:700;font-size:14px;color:var(--kirmizi-koyu)
}
.kart:hover .daha svg{transform:translateX(3px)}
.daha svg{transition:transform .18s ease}

/* ---------------------------------------------------------------- üç söz */
.sozler{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.soz{background:var(--beyaz);border-radius:16px;padding:22px;box-shadow:var(--golge);border-top:4px solid var(--kirmizi)}
.soz img{width:52px;height:52px;object-fit:contain;margin-bottom:12px}
.soz h3{margin-bottom:8px}
.soz p{margin:0;color:var(--ikincil);font-size:15px}

/* ---------------------------------------------------------------- anlatım */
.anlat{display:grid;gap:clamp(20px,3vw,44px);align-items:center}
@media (min-width:860px){ .anlat{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)} }
/* 🔴 TELEFONDA FOTOĞRAF METNİN ÖNÜNE GEÇER (Ö13): ölçümde /hakkimizda/
   ilk ekranı %2.6 görsel, %45.8 metin çıkmıştı. */
@media (max-width:859px){ .anlat figure{order:-1} }
/* 🔴 GÖRSELE ORAN VERİLDİ — yüklenirken sayfa zıplamasın (CLS). */
.anlat figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:927/576;box-shadow:var(--golge)}
.anlat figure img{width:100%;height:100%;object-fit:cover}
.alinti{
  margin:0 0 20px;padding:18px 20px;background:var(--beyaz);border-left:5px solid var(--kirmizi);
  border-radius:0 14px 14px 0;font-size:clamp(15.5px,1.2vw,17.5px);color:var(--lacivert-koyu);box-shadow:var(--golge)
}
.alinti p:last-child{margin:0}

/* ---------------------------------------------------------------- bilgi kutuları */
.bilgi-kutular{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.bilgi-kutu{background:var(--beyaz);border-radius:16px;padding:22px;box-shadow:var(--golge)}
.bilgi-kutu h3{color:var(--kirmizi-koyu)}
.bilgi-kutu p{margin:0;color:var(--ikincil);font-size:15px}

/* ---------------------------------------------------------------- vaka şeridi
   ⚠️ Bu şerit eski sitede de BAŞLIKSIZDI; "vakalarımız" diye sunulmuyor. */
.serit{border-radius:16px;overflow:hidden;box-shadow:var(--golge);background:var(--lacivert)}
.serit img{width:100%;height:auto}
.serit-not{margin:10px 0 0;font-size:13px;color:var(--ikincil)}

/* ---------------------------------------------------------------- çağrı */
.cagri{background:var(--kirmizi);color:#fff}
.cagri-ic{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);padding:clamp(26px,3.6vw,46px) 0
}
.cagri h2{color:#fff;margin-bottom:6px;font-size:clamp(21px,2.3vw,30px)}
.cagri p{margin:0;opacity:.95;max-width:52ch}
.cagri-dugmeler{display:flex;flex-wrap:wrap;gap:10px}

.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 20px;border-radius:999px;font-weight:700;font-size:15.5px;
  border:2px solid transparent;cursor:pointer;text-decoration:none
}
.dugme:hover{text-decoration:none}
.dugme-beyaz{background:#fff;color:var(--kirmizi-koyu)}
.dugme-beyaz:hover{background:#ffe9ea}
.dugme-cizgi{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.dugme-cizgi:hover{background:rgba(255,255,255,.14)}
.dugme-wa{background:#1fab54;color:#fff}
.dugme-wa:hover{background:#17964a}
.dugme-ana{background:var(--kirmizi-koyu);color:#fff}
.dugme-ana:hover{background:var(--kirmizi)}
.dugme-lacivert{background:var(--lacivert);color:#fff}
.dugme-lacivert:hover{background:var(--lacivert-koyu)}

/* 🔴 WHATSAPP İKİ MOD — ÇİFT SINIF. Tek sınıfla yazılırsa `.yuzen a` ve
   `.cagri-dugmeler a` gibi kardeş kurallar özgüllükte yener ve ikon İKİ KEZ
   görünür (bilinen tuzak). Bu yüzden her bağlam kendi çift seçicisini taşır. */
.wa-masaustu{display:none}
@media (min-width:601px){
  .wa-mobil{display:none}
  .wa-masaustu{display:inline-flex}
  .yuzen .wa-mobil{display:none}
  .yuzen .wa-masaustu{display:inline-flex}
  .alt-wa .wa-mobil{display:none}
  .alt-wa .wa-masaustu{display:inline-flex}
  /* 🔴 ÖLÇÜMDE YAKALANDI: `.bilgi-liste a` (0,1,1) `.wa-mobil`i (0,1,0)
     yeniyordu ve iletişim sayfasında İKİ WhatsApp bağlantısı birden
     görünüyordu. Her genel `a` kuralı olan kabın kendi çift sınıflı
     karşılığı yazılır. */
  .bilgi-liste .wa-mobil{display:none}
  .bilgi-liste .wa-masaustu{display:inline-flex}
}
@media (max-width:600px){
  .yuzen .wa-masaustu{display:none}
  .yuzen .wa-mobil{display:inline-flex}
  .alt-wa .wa-masaustu{display:none}
  .alt-wa .wa-mobil{display:inline-flex}
  .bilgi-liste .wa-masaustu{display:none}
  .bilgi-liste .wa-mobil{display:inline-flex}
}

/* ---------------------------------------------------------------- yazı gövdesi */
.govde-metin{max-width:70ch}
.govde-metin p{margin:0 0 1.05em}
.govde-metin h2,.govde-metin h3{margin-top:1.4em}
.govde-metin ul,.govde-metin ol{margin:0 0 1.05em;padding-left:1.3em}
.govde-metin img{border-radius:12px;margin:1.2em 0}
.govde-metin a{text-decoration:underline}

.yazi-kapak{border-radius:18px;overflow:hidden;box-shadow:var(--golge);margin-bottom:clamp(18px,2.4vw,30px)}
.yazi-kapak img{width:100%;height:auto}

/* --- detay sayfasi girisi: telefonda KAPAK ONCE (Ö13) --- */
.detay-bas{display:grid;gap:clamp(14px,2.2vw,32px);align-items:center}
.detay-kapak{margin:0;border-radius:18px;overflow:hidden;box-shadow:var(--golge);
  background:#dce9f5;aspect-ratio:4/3;order:-1}
.detay-kapak img{width:100%;height:100%;object-fit:cover}
.detay-ozet{color:var(--ikincil);font-size:clamp(15px,1.15vw,17px);max-width:56ch;margin-bottom:0}
@media (min-width:860px){
  .detay-bas{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .detay-kapak{order:0;aspect-ratio:2/1}
}

.kirinti{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--ikincil);margin:0 0 14px;padding:0;list-style:none}
.kirinti li::after{content:"›";margin-left:6px;opacity:.6}
.kirinti li:last-child::after{content:""}

.sayfa-bas{padding:clamp(26px,3.4vw,44px) 0 0}

/* ---------------------------------------------------------------- galeri */
.galeri{display:grid;gap:clamp(10px,1.3vw,16px);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.galeri figure{margin:0;border-radius:16px;overflow:hidden;background:#dce9f5;box-shadow:var(--golge)}
.galeri figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galeri figcaption{padding:11px 14px;background:var(--beyaz);font-size:14px;color:var(--lacivert-koyu);font-weight:600}
.galeri figcaption span{display:block;font-weight:400;color:var(--ikincil);font-size:13px;margin-top:2px}

/* ---------------------------------------------------------------- form */
.form-kutu{background:var(--beyaz);border-radius:18px;padding:clamp(18px,2.4vw,30px);box-shadow:var(--golge)}
.alan{margin-bottom:15px}
.alan label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--lacivert-koyu)}
.alan input,.alan select,.alan textarea{
  width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--cizgi);
  border-radius:11px;font:inherit;color:var(--metin);background:#fbfdff
}
.alan textarea{min-height:120px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{border-color:var(--lacivert);outline:none;box-shadow:0 0 0 3px rgba(1,74,141,.14)}
.form-notu{font-size:13.5px;color:var(--ikincil);margin:14px 0 0}
.uyari{border-radius:12px;padding:13px 15px;margin:0 0 16px;font-size:15px}
.uyari-hata{background:#fdeced;border:1px solid #f6c3c6;color:#8d1016}
.uyari-ok{background:#e7f7ee;border:1px solid #b6e3c9;color:#135c33}
.uyari ul{margin:6px 0 0;padding-left:1.2em}
/* 🔴 BAL KÜPÜ GERÇEKTEN GÖRÜNMEZ OLMALI: yalnız `left:-9999px` ile
   taşındığında alan hâlâ 177x21 px'lik bir dokunma hedefi olarak
   ölçülüyor (ve ekran okuyucuya da bir kutu gibi geliyor). */
.gizli-alan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gizli-alan input{width:1px;height:1px;min-height:0;padding:0;border:0}

/* ---------------------------------------------------------------- iletişim */
.iletisim-ızgara{display:grid;gap:clamp(16px,2.4vw,30px)}
@media (min-width:900px){ .iletisim-ızgara{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)} }
.bilgi-liste{list-style:none;margin:0;padding:0}
.bilgi-liste li{padding:13px 0;border-bottom:1px solid var(--cizgi)}
.bilgi-liste li:last-child{border-bottom:0}
.bilgi-liste b{display:block;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--kirmizi-koyu)}
.bilgi-liste a{display:inline-flex;align-items:center;min-height:44px}
.harita{border-radius:18px;overflow:hidden;box-shadow:var(--golge);background:#dce9f5}
.harita iframe{display:block;width:100%;height:clamp(280px,42vw,430px);border:0}

/* ---------------------------------------------------------------- altbilgi */
.alt{background:var(--lacivert-koyu);color:#cfe2f2;margin-top:0}
.alt-ic{display:grid;gap:clamp(20px,2.6vw,34px);padding:clamp(32px,4vw,52px) 0;grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
.alt h3{color:#fff;font-size:16px;margin-bottom:12px}
.alt p{font-size:14.5px;line-height:1.6;color:#b9d3e9}
/* 🔴 BEYAZ PLAKA KALDIRILDI. Açık zeminli logoyu koyu altbilgide beyaz
   bir kutuya oturtmak "garip" duruyordu (kullanıcı 2026-10-14). Artık diş
   kendi hâliyle, yazı altbilginin beyazıyla. */
.alt-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.alt-logo img{width:46px;height:auto;flex:none}
.alt-logo-yazi{display:flex;flex-direction:column;line-height:1.05}
.alt-logo-yazi .logo-ust{color:#cfe2f2;opacity:1;font-size:12px}
.alt-logo-yazi .logo-alt{color:#fff;font-size:19px}
.alt-slogan{font-family:Poppins,sans-serif;font-weight:700;color:#fff!important;font-size:17px;margin-bottom:10px}
.alt-liste{list-style:none;margin:0;padding:0}
.alt-liste a{color:#cfe2f2;font-size:14.5px;display:flex;align-items:center;min-height:44px;padding:2px 0}
.alt-liste a:hover{color:#fff}
.alt-sosyal{display:flex;gap:14px}
.alt-sosyal a{color:#fff;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;min-height:44px}
.alt-wa{margin-top:14px}
.alt-son{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.alt-son small{color:#9fc0dc;font-size:13px}

/* 🔴 ALTBİLGİ DOKUNMA HEDEFİ 44 px — içinde telefon ve e-posta var. */
/* 🔴 ALTBİLGİ DOKUNMA HEDEFİ HER GENİŞLİKTE 44 px. AGENTS.md kuralı
   `max-width:860px` ile yazılmıştı; ölçümde masaüstünde de 19 bağlantı
   34 px çıktı (hepsi telefon/e-posta dahil), kural genişletildi. */

/* ---------------------------------------------------------------- yüzen */
.yuzen{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;
  padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);border-top:1px solid var(--cizgi);
  backdrop-filter:blur(6px)
}
.yuzen a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;border-radius:12px;font-weight:700;font-size:15px;color:#fff
}
.yuzen .yuzen-ara{background:var(--kirmizi-koyu)}
.yuzen .yuzen-wa{background:#1fab54}
@media (min-width:1000px){ .yuzen{display:none} }
@media (max-width:999px){ body{padding-bottom:72px} }

/* ---------------------------------------------------------------- hareket
   🔴 GÖRÜNÜRLÜK BETİĞE BAĞLANMAZ. Belirme yalnız CSS `animation-timeline`
   ile; destek yoksa öge zaten tam görünür kalır (başarısızlık yönü GÖSTER). */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .belir{
      animation:belirme linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
  }
}
@keyframes belirme{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}