/* ═══════════════════════════════════════════════════════════════════
   model4.css — "RİTİM" konsepti
   Hero'ya dokunulmaz.
   Fikir: sayfa tek tonda ilerlemez. Koyu hero'dan sonra AÇIK bir bölüm
   gelir, sonra koyu, sonra fotoğraf, sonra açık... Göz dinlenir.
   Üstüne hareket: kayan şerit, dev hayalet rakamlar, paralaks, kademeli
   beliriş, satır etkileşimleri.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --m4-acik:#F1F1F1;          /* nötr kırık beyaz — sarımtırak #F4F3EF "saman" gibi duruyordu */
  --m4-acik-2:#E8E8E8;
  --m4-koyu:#23272B;       /* önceki #14171A çok ağır/boğucuydu — yumuşatıldı */
  --m4-koyu-2:#2A2F34;
  --m4-mur:#0F1215;
  --m4-ink:#15171A;           /* açık zeminde metin */
  --m4-ink-2:#585E63;
  --m4-ink-3:#666C70;
  --m4-ak:#F3F5F4;            /* koyu zeminde metin */
  --m4-ak-2:#A9B2B7;
  --m4-ak-3:#7E878D;
  --m4-vurgu:#B08D57;          /* kısık bronz — sadece ince aksanlarda */
}

html{scroll-behavior:smooth}

/* ═══ 1. HAKKINDA — koyu hero'dan sonra AÇIK nefes ═══════════════ */
body #hakkinda{background:var(--m4-acik)!important;color:var(--m4-ink)}
body #hakkinda .kural{background:linear-gradient(90deg,var(--m4-ink),transparent)!important}
body #hakkinda .profil-baslik{color:var(--m4-ink)!important}
body #hakkinda .profil-baslik span{color:var(--m4-ink-3)!important}
body #hakkinda :is(.metin,.profil-lead,p){color:var(--m4-ink-2)!important}
body #hakkinda .kunye-liste,
body #hakkinda .kunye-satir{border-color:rgba(21,23,26,.14)!important}
body #hakkinda .kunye-satir dt{color:var(--m4-ink-3)!important}
body #hakkinda .kunye-satir dd{color:var(--m4-ink)!important}
body #hakkinda .portre{background:var(--m4-acik-2)!important;border:1px solid rgba(21,23,26,.16)!important;
  box-shadow:18px 18px 0 rgba(21,23,26,.08)!important}
body #hakkinda .portre figcaption,
body #hakkinda .portre-bos{color:var(--m4-ink-2)!important}


/* ═══ 3. ÇALIŞMA KONULARI — asimetrik kart mozaiği ══════════════ */
body #konular{background:radial-gradient(ellipse 140% 60% at 50% -10%,#2E3338,var(--m4-koyu) 62%)!important;position:relative;overflow:hidden;padding-top:clamp(5.5rem,11vw,9rem)!important}
body #konular :is(h2,.konu h3){color:var(--m4-ak)!important}
body #konular > .wrap > .konu-bas :is(p,.metin){color:var(--m4-ak-2)!important}
body #konular .kural{background:linear-gradient(90deg,var(--m4-ak-3),transparent)!important}
body #konular .konu-kontrol{display:none!important}
body #konular .konu-karusel{overflow:visible}

/* iki sütun; sağ sütun aşağı kaydırılır → şelale etkisi */
body #konular .konu-izgara{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,3.4vw,3.2rem)!important;
  align-items:start;overflow:visible!important;
  padding:0!important;margin-top:clamp(3.2rem,6.5vw,5rem)}
body #konular .konu-izgara > *:nth-child(even){margin-top:clamp(3.5rem,8vw,7rem)}

/* kart */
body #konular .konu{
  position:relative;display:block!important;
  flex-basis:auto!important;width:auto!important;min-width:0!important;
  min-height:0!important;
  padding:clamp(2.1rem,3.6vw,3.1rem)!important;
  background:rgba(243,245,244,.045)!important;
  border:1px solid rgba(243,245,244,.16)!important;border-radius:0!important;
  overflow:hidden;isolation:isolate;
  /* opacity/transform buraya eklenmezse scroll-beliriş animasyonu (.m4-yukari)
     bu daha özgül kuralla eziliyor ve kartlar animasyonsuz aniden beliriyordu */
  transition:border-color .4s ease,background .4s ease,
             opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
/* kartlara farklı yükseklik → asimetri */
body #konular .konu:nth-child(4n+1){padding-bottom:clamp(2.6rem,5vw,4rem)!important}
body #konular .konu:nth-child(4n+4){padding-top:clamp(2.6rem,5vw,4rem)!important}

body #konular .konu:hover{
  transform:translateY(-3px);
  background:rgba(243,245,244,.07)!important;
  border-color:var(--m4-vurgu)!important}

/* üst köşede dev hayalet rakam */
body #konular .konu::before{
  position:absolute!important;left:auto!important;right:1.1rem;top:.2rem;
  font-size:clamp(3.2rem,6vw,5.2rem)!important;font-weight:700;line-height:1;
  color:transparent!important;-webkit-text-stroke:1px rgba(243,245,244,.16);
  pointer-events:none;z-index:0;
  transition:-webkit-text-stroke-color .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
body #konular .konu:hover::before{
  -webkit-text-stroke-color:rgba(176,141,87,.55);transform:translateY(-3px) scale(1.05)}

/* alt kenarda büyüyen bronz çizgi */
body #konular .konu::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--m4-vurgu),transparent);
  transition:width .6s cubic-bezier(.16,1,.3,1)}
body #konular .konu:hover::after{width:62%}

body #konular .konu h3{
  position:relative;z-index:1;margin:0 0 .85rem 0!important;
  font-size:clamp(1.15rem,1.9vw,1.5rem)!important;line-height:1.25!important;
  max-width:11ch}
body #konular .konu p{
  position:relative;z-index:1;margin:0!important;
  font-size:.89rem!important;line-height:1.8!important;
  color:var(--m4-ak-2)!important}

@media(max-width:760px){
  body #konular .konu-izgara{grid-template-columns:1fr!important}
  body #konular .konu-izgara > *:nth-child(even){margin-top:0}
  body #konular .konu h3{max-width:none}
  body #konular .konu::before{font-size:2.8rem!important;right:.9rem}
}

/* ═══ 5. BEYAN BANDI — bölümler arası nefes ═════════════════════ */
.m4-beyan{background:var(--m4-acik);padding:clamp(4rem,9vw,7rem) 0 0;text-align:center}
/* Beyan, SSS ve iletişim tek açık tonda birleşir; iki yakın ama farklı ton
   yan yana gelince hata gibi duruyordu. Sayfada yalnızca iki ton var:
   koyu ve nötr kırık beyaz. */
body #sss{background:var(--m4-acik)!important}
body #iletisim.iletisim--acik{background:var(--m4-acik)!important}
.m4-beyan p{max-width:34ch;margin:0 auto;
  font-family:var(--serif);font-size:clamp(1.35rem,3vw,2.3rem);line-height:1.35;
  letter-spacing:-.02em;color:var(--m4-ink)}
.m4-beyan i{display:block;width:34px;height:1px;background:var(--m4-vurgu);
  margin:0 auto clamp(1.6rem,3vw,2.4rem)}

/* ═══ 6. KADEMELİ BELİRİŞ — mevcut .rv üstüne zenginlik ═════════ */
.m4-yukari{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.m4-yukari.m4-in{opacity:1;transform:none}
.m4-soldan{opacity:0;transform:translateX(-30px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.m4-soldan.m4-in{opacity:1;transform:none}

/* ═══ 7. SSS / YAZILAR — açık kalır, satırlar canlanır ══════════ */
body .sss-liste summary{transition:padding-left .4s cubic-bezier(.16,1,.3,1),color .3s ease}
body .sss-liste summary:hover{padding-left:.7rem}
body .yazi{transition:background .45s ease}
body .yazi:hover{background:rgba(21,23,26,.028)}

/* ═══ 8. Üst menü — açık bölümlerde okunur kalsın ═══════════════ */
body #nav.solid{background:rgba(241,241,241,.9)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(21,23,26,.1)!important;box-shadow:none!important}
body #nav.solid :is(.marka-ad,.nav-tel,.nav-links a){color:var(--m4-ink)!important}
/* .nav-iletisim dolgulu koyu bir buton (origin-button) — yazı rengini
   zorlamak koyu-üstüne-koyu yapıp görünmez ediyordu; dokunulmuyor */
body #nav.solid .menu-ac{--origin-surface:#15171A;--origin-ink:#F3F5F4}

/* ═══ Hareket hassasiyeti ═══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .m4-yukari,.m4-soldan{opacity:1;transform:none;transition:none}
  body #konular .konu::before,body #konular .konu h3{transition:none}
}

/* ═══ 9. Menü açıkken alttaki sabit arama/WhatsApp çubuğu gizlenir ══════
   Telefonda çubuk menünün üstünde kalıp "İletişim ve konum" butonunu
   örtüyordu. Menüde telefon ve WhatsApp bağlantıları zaten var. */
body:has(.menu.acik) .sabit-bar{display:none!important}


/* ═══ 10. Künye kartı: portrenin yerine (Ahmet Bey fotoğraf istemiyor) ═══ */
body #hakkinda .kunye-kart{background:#fff;border:1px solid rgba(21,23,26,.12);border-radius:16px;
  padding:clamp(1.5rem,2.6vw,2.25rem);align-self:center;margin:0}
body #hakkinda .kunye-kart .kunye-liste{margin:0;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0;border:0;width:100%}
body #hakkinda .kunye-kart .kunye-satir{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.2rem;padding-block:1rem;border:0;width:100%}
body #hakkinda .kunye-kart :is(dt,dd){width:auto!important;grid-column:auto!important;text-align:left}
body #hakkinda .kunye-kart{width:100%;min-width:0;justify-self:stretch}
body #hakkinda .kunye-kart .kunye-satir + .kunye-satir{border-top:1px solid rgba(21,23,26,.12)}
body #hakkinda .kunye-kart .kunye-satir:first-child{padding-top:0}
body #hakkinda .kunye-kart .kunye-satir:last-child{padding-bottom:0}
body #hakkinda .kunye-kart dt{font-size:.78rem;letter-spacing:.04em;text-transform:none;color:var(--m4-ink-3)!important}
body #hakkinda .kunye-kart dd{margin:0;font-size:1.1rem;color:var(--m4-ink)!important}

/* eski 3 sütunlu künye düzeninin satır kurallarını sıfırla */
body #hakkinda .kunye-kart .kunye-satir{padding-inline:0!important;margin:0!important;min-height:0!important;border-left:0!important;border-right:0!important;align-content:start}
body #hakkinda .kunye-kart .kunye-satir:first-child{padding-top:0!important}
body #hakkinda .kunye-kart .kunye-satir:last-child{padding-bottom:0!important}
body #hakkinda .kunye-kart .kunye-satir + .kunye-satir{border-top:1px solid rgba(21,23,26,.12)!important}
body #hakkinda .kunye-kart :is(dt,dd){padding:0!important;margin:0!important}
@media(min-width:901px){body #hakkinda .hak{grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr)!important}}

/* 11. Dar telefonlar: kayan menü çubuğunda büro adı MENÜ düğmesine değmesin */
@media(max-width:480px){
  body #nav .marka{min-width:0}
  body #nav .marka-ad{font-size:clamp(.8rem,4.1vw,1.02rem)!important;letter-spacing:.04em!important;white-space:nowrap}
}
@media(max-width:340px){body #nav .marka-ad{letter-spacing:.02em!important}}

/* 12. Okunabilirlik (30-50 yaş): 9-10 px kalan etiket ve düğme yazılarını büyüt */
body #iletisim .il-satir small{font-size:.72rem!important}
body #iletisim .il-btn{font-size:.8rem!important}
body #iletisim .ref-form label,body #iletisim .ref-form label span{font-size:.84rem!important}
body #iletisim .ref-form-note{font-size:.8rem!important}
body .menu-ac{font-size:.72rem!important}
body footer :is(h4,h3.f-baslik){font-size:.74rem!important}
/* iOS Safari 16 px altındaki alanlara dokununca sayfayı yakınlaştırır */
@media(max-width:760px){body #iletisim :is(input,select,textarea){font-size:16px!important}}

/* 13. Erişilebilirlik: alt bilgi başlıkları h4 yerine h3 (başlık sırası), görünüm aynı */
body footer h3.f-baslik{font-family:Manrope,Arial,sans-serif!important;font-weight:500!important;font-style:normal!important;
  line-height:normal!important;letter-spacing:.24em!important;text-transform:uppercase!important;color:#FAFAFA!important;
  margin:0 0 1rem!important;text-wrap:wrap!important}
/* gri yardımcı metinler beyaz kartta en az 4.5:1 kontrast */
body #iletisim :is(.il-satir small,.ref-form-note,.ref-form-note a){color:#6B6B6B!important}

/* 14. SSS: soru başlıkları h3 (soru tabanlı başlık yapısı), görünüm summary ile aynı */
body .sss-liste summary h3{font:inherit!important;letter-spacing:inherit!important;color:inherit!important;
  text-transform:inherit!important;margin:0!important;padding:0!important;border:0!important;max-width:none!important}
body .sss-liste details ol{font-size:.95rem;line-height:1.8;color:var(--gri);max-width:68ch;
  margin:-.9rem 0 0;padding:0 0 1.6rem 1.3rem}
body .sss-liste details ol li{padding-left:.3rem}
body .sss-liste details ol li::marker{color:var(--m4-ink-3,#6B6B6B)}
/* künyedeki kaynak bağlantısı: metin gibi, ince alt çizgi */
body #hakkinda .kunye-kart a.kunye-kaynak{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(21,23,26,.35)}
body #hakkinda .kunye-kart small.kunye-not{font-family:var(--sans,Manrope,sans-serif);font-size:.72rem;color:var(--m4-ink-3)}
/* 16. İletişim kartında yol tarifi satırı; SSS cevapları biraz büyük (30-50 yaş) */
body #iletisim .il-satir p.il-yol,body #iletisim .il-satir p.il-yol a{font:500 .84rem/1.6 Manrope,Arial,sans-serif!important;color:#6B6B6B!important;letter-spacing:0!important}
body #iletisim .il-satir p.il-yol{margin-top:.55rem!important}
body #iletisim .il-satir p.il-yol a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
body .sss-liste details p,body .sss-liste details ol{font-size:1rem}
body .sss-liste details a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* 17. Okunabilirlik (30-50 yaş): ana tanım cümlesi, kartlar ve uyarılar */
body .hero-v0c .hero-alt{font-size:clamp(1.02rem,1.25vw,1.12rem)!important;line-height:1.6!important}
body #konular .konu p{font-size:1rem!important;line-height:1.65!important}
body #konular .uyari,body footer .f-uyari{font-size:.875rem!important}
body #iletisim .ref-form-note{font-size:.875rem!important}