/* ═══════════════════════════════════════════════════════════════
   Yaratıcı Düşün — ortak bileşenler
   TEK KAYNAK. Footer ve bülten formu yalnız burada tanımlanır;
   sayfaların kendi <style> bloklarında bu kuralların kopyası bulunmaz.
   Değişiklik gerekiyorsa burada yap — 18 sayfaya birden uygular.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- bülten formu: açık zemin (sayfa içi .notify kutuları) ---------- */
.news-form{display:flex;border-bottom:1px solid var(--ink);max-width:380px}
.news-form input{
  flex:1;border:none;outline:none;font-family:'Inter',sans-serif;font-size:.95rem;
  padding:10px 0;background:transparent;min-width:0;color:var(--ink);
}
.news-form input::placeholder{color:var(--gray)}
.news-form button{
  border:none;background:none;cursor:pointer;font-size:1.2rem;padding:0 4px;color:var(--ink);
  font-family:'Instrument Serif',serif;font-style:italic;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.news-form button:hover{transform:translateX(4px)}

.abone-mesaj{margin-top:9px;font-size:.78rem;color:var(--gray);line-height:1.5}
.abone-mesaj[data-hata="1"]{color:var(--acc1)}
.abone-onay{
  display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  font-size:.76rem;color:var(--gray);line-height:1.45;cursor:pointer;
}
.abone-onay input{
  appearance:none;width:15px;height:15px;flex:none;margin-top:2px;
  border:1px solid var(--gray);background:transparent;cursor:pointer;min-height:0;
}
.abone-onay input:checked{background:var(--ink);border-color:var(--ink)}
.abone-onay a{border-bottom:1px solid var(--line)}

/* ---------- footer: her zaman inversiyon ---------- */
footer{
  margin-top:clamp(80px,12vw,160px);
  background:var(--ink);color:#A5A29A;border-top:none;
}
footer .display{color:var(--bg)}
footer .small-label{color:#8B887F}
footer .small-label::before{content:none}   /* kalem vuruşu yalnız hero'da */

.foot-head{padding:clamp(48px,7vw,90px) 0 clamp(36px,5vw,64px)}
.foot-head .small-label{display:block;margin-bottom:18px}
.foot-head h2{max-width:14em}

.foot-cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,56px);padding-bottom:clamp(48px,7vw,80px);
}
@media(max-width:860px){.foot-cols{grid-template-columns:1fr}}

.foot-col h4{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:1.3rem;margin-bottom:14px;color:var(--bg);
}
.foot-col a.big{
  font-family:'Archivo',sans-serif;font-weight:300;font-size:1.15rem;letter-spacing:-0.01em;
  color:var(--bg);border-bottom:1px solid transparent;
  transition:border-color .25s cubic-bezier(.2,.8,.2,1);
}
.foot-col a.big:hover{border-color:var(--bg)}

.foot-col ul{list-style:none}
/* takip et sütunu: 6 mecra tek sıra halinde uzayıp sütunları dengesiz bırakıyordu */
.foot-col:nth-child(2) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
@media(max-width:860px){.foot-col:nth-child(2) ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.foot-col:nth-child(2) ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-col ul a{
  display:inline-block;padding:3px 0;color:#A5A29A;
  transition:color .2s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);
}
.foot-col ul a:hover{color:var(--bg);transform:translateX(4px)}

/* footer içindeki bülten formu: koyu zemine göre ters çevrilir */
footer .news-form{border-bottom:1px solid var(--bg)}
footer .news-form input{color:var(--bg)}
footer .news-form input::placeholder{color:#8B887F}
footer .news-form button{color:var(--bg)}

.foot-onay{
  display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  font-size:.74rem;color:#8B887F;line-height:1.45;cursor:pointer;
}
.foot-onay input{
  appearance:none;width:15px;height:15px;flex:none;margin-top:2px;
  border:1px solid #6A675F;background:transparent;cursor:pointer;min-height:0;
}
.foot-onay input:checked{background:var(--bg);border-color:var(--bg)}
.foot-onay a{color:#A5A29A;border-bottom:1px solid #4A4842}

.foot-col small{display:block;margin-top:14px;font-size:.75rem;color:#8B887F}
.foot-col small a{border-bottom:1px solid #4A4842}

footer .abone-mesaj{color:#A5A29A}
footer .abone-mesaj[data-hata="1"]{color:var(--acc3)}

.foot-bottom{
  border-top:1px solid #2C2B26;color:#7A776E;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;padding:22px 0 26px;font-size:.8rem;
}
.foot-bottom .legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom .legal a:hover{color:var(--bg)}

/* dokunma hedefleri — dar ekranda rahatlar */
@media(max-width:820px){
  .foot-col ul a{padding:9px 0}
  .foot-bottom{padding:20px 0 30px}
  .foot-bottom .legal{gap:14px 20px}
  .foot-bottom .legal a{padding:8px 0}
}

/* ---------- alt geçiş satırı (.lazy-line) ---------- */
/* 12 sayfada aynı bileşen; sayfa kopyaları kaldırıldı, tek kaynak burası */
.lazy-line{padding-top:clamp(80px,12vw,150px);text-align:center}
.lazy-line a{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.4rem,3.2vw,2.4rem);border-bottom:1px solid var(--ink);
  padding-bottom:2px;transition:opacity .25s cubic-bezier(.2,.8,.2,1);
}
.lazy-line a:hover{opacity:.5}
.lazy-line p{margin-top:10px;color:var(--gray);font-size:.88rem}

/* ---------- yakın konular (.yakin) ---------- */
/* 7 detay sayfasında AYNI şerit; her sayfa yalnız kendi kartını atlıyor.
   Kaynağı tek yerde: tools/yakin-kartlar.py. Kart eklemek/çıkarmak için
   orayı düzenleyip betiği çalıştır, 7 sayfaya birden yazar.

   Kutu, yazilar.html'deki Substack kartının (.pub) aynısı: çerçeve, dolgu,
   hover ve geçiş birebir. .pub o sayfanın kendi <style>'ında; bu bileşen 7
   sayfada kullanıldığı için kopyası burada. .pub değişirse burası da değişmeli. */
/* --solma: kenardaki yumuşamanın bittiği nokta. Hem maske hem oklar
   bunu kullanıyor — ayrı sayılar yazılsa biri değişince öteki kayardı. */
.yakin{--solma:7%;padding-top:0;margin-top:clamp(68px,10vw,128px)}
.yakin hr{border:0;border-top:1px solid var(--ink);margin:10px 0 0}

/* ── şerit ── */
/* Kenarlarda yumuşama: kartlar sert kesilmek yerine soluyor. Kılavuzdaki
   "degrade yok" kuralı dolgu ve zeminler için; bu bir maske, boyanan bir
   yüzey değil — kartın nerede bittiğini değil, şeridin devam ettiğini
   anlatıyor. Sertunç'un isteğiyle eklendi (18 Eylül). */
.yakin-serit{
  margin-top:clamp(28px,4vw,48px);
  /* overflow HIDDEN, auto değil. Transform ile kayan bir rayda elle
     kaydırmaya da izin verirsek ikisi toplanıyor: kullanıcı sağa
     kaydırdığında ray çoktan sola kaymış oluyor ve sağda boşluk açılıyor.
     Şerit zaten sonsuz döngüde; her kart sırası gelince geliyor.
     Hareket kapalıyken (aşağıda) elle kaydırmaya geri dönülüyor. */
  overflow:hidden;
  padding:6px 0;                      /* odak halkası kırpılmasın */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--solma),#000 calc(100% - var(--solma)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--solma),#000 calc(100% - var(--solma)),transparent 100%);
}
.yakin-serit::-webkit-scrollbar{display:none}

/* Ray iki kopya taşıyor; -50% tam bir tur eder ve dikiş görünmez. */
.yakin-ray{
  display:flex;gap:clamp(20px,3vw,36px);width:max-content;
  animation:yakinKay 56s linear infinite;
}
@keyframes yakinKay{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - clamp(20px,3vw,36px) / 2))}
}
/* Üstüne gelince ve klavyeyle girince durur — hareketli bağlantıya
   nişan almak zordur; durdurmadan tıklanabilir olmazdı. */
.yakin-serit:hover .yakin-ray,
.yakin-serit:focus-within .yakin-ray{animation-play-state:paused}

/* ── kart ── */
.ykart{
  flex:0 0 clamp(240px,26vw,330px);
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--line);padding:26px 24px;
  transition:border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1);
}
.ykart:hover,.ykart.acik{border-color:var(--ink);transform:translateY(-5px)}
.ykart .ykart-tur{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.ykart h3{font-family:'Archivo',sans-serif;font-weight:300;font-size:1.3rem;letter-spacing:-0.01em}
.ykart p{color:var(--gray);font-size:.92rem;flex:1}
.ykart .ykart-go{
  margin-top:auto;font-family:'Instrument Serif',serif;font-style:italic;
  color:var(--gray);transition:color .3s;
}
.ykart:hover .ykart-go,.ykart.acik .ykart-go{color:var(--acc2)}

@media (max-width:560px){.ykart{flex-basis:78vw}}

/* Hareket azaltılmışsa şerit akmaz; elle kaydırılan sıradan bir ray olur.
   Maske de kalkar, çünkü akış yokken kenarı soldurmanın anlamı kalmıyor. */
@media (prefers-reduced-motion:reduce){
  .yakin-ray{animation:none;width:auto}
  /* Akış yokken şerit elle kaydırılabilir olmalı, yoksa arkadaki kartlara
     hiç ulaşılamaz. Maske de kalkıyor: soldurulacak bir hareket yok. */
  .yakin-serit{
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .ykart{transition:none}
  .ykart:hover,.ykart.acik{transform:none}
}

/* ── şerit okları ── */
/* Akış yavaş bulunabiliyor; okla bir kart ileri/geri sarılıyor.
   Bloğun iki ucuna yaslı: sol ok solda, sağ ok sağda.
   Daire, sitenin mevcut ok dilinden (.cat .arr) — kural 6'daki
   "yuvarlak kart yok" yasağı kartlar için, düğme değil. */
/* Oklar şeridin ÜSTÜNDE, kartların dikey ortasında; yatayda ink
   çizgisinin iki ucuyla hizalı. Negatif margin ile itmek yerine mutlak
   konum: kart yüksekliği içerikle değişiyor, sihirli sayı yazsaydık her
   metin değişikliğinde kayardı.
   pointer-events: oklar dışındaki alan tıklamayı geçirsin, altındaki
   kartlar tıklanabilir kalsın. */
.yakin-kutu{position:relative}
.yakin-ok,
.kaydir-ok{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:flex;justify-content:space-between;align-items:center;
}
.yakin-ok button,
.kaydir-ok button{pointer-events:auto}
.yakin-ok button,
.kaydir-ok button{
  /* Görünen daire %30 küçüldü (54→38). Kural 9 dokunma hedefini 44px
     istiyor; daire küçülünce hedef de küçülürdü. ::before ile görünmez
     bir 44px alan bırakılıyor — göz küçük daireyi görüyor, parmak 44px
     buluyor. */
  width:clamp(31px,2.8vw,38px);aspect-ratio:1;border-radius:50%;
  /* Sayfaların kendi CSS'inde button{min-height:44px} var (dokunma hedefi
     için). Burada yüksekliği 44'e çekip daireyi elipse çeviriyordu; hedefi
     ::before karşıladığı için sıfırlanıyor. */
  min-height:0;
  position:relative;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .4s cubic-bezier(.2,.8,.2,1),
             border-color .4s cubic-bezier(.2,.8,.2,1),
             transform .5s cubic-bezier(.2,.8,.2,1);
}
/* Dolu ok ince çizgili olandan daha yatay; %44 düğmede küçük kalıyordu. */
.yakin-ok button::before,
.kaydir-ok button::before{
  content:'';position:absolute;top:50%;left:50%;
  width:max(44px,100%);height:max(44px,100%);
  transform:translate(-50%,-50%);
}
.yakin-ok button svg,
.kaydir-ok button svg{width:52%}
/* Hover'da etkileşim rengi (kural 5) */
.yakin-ok button:hover,
.kaydir-ok button:hover{background:var(--acc2);border-color:var(--acc2)}
.yakin-ok button:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .yakin-ok button{transition:none}
  .yakin-ok button:active{transform:none}
}

/* ══ Tıklamalı kaydırıcı ═══════════════════════════════════════════════
   Video kartları için yapıldı (21 Eylül). "Bunlar da var" şeridinden
   farkı: o kendiliğinden akıyor, bu durgun — kullanıcı aradığını
   arıyor, akan bir rafta arama yapılmaz.

   Ok dili ikisinde ortak; yukarıdaki .yakin-ok kuralları .kaydir-ok'u
   da kapsıyor, buraya ikinci bir daire çizilmedi.
   ──────────────────────────────────────────────────────────────────── */
.kaydir{position:relative;margin-top:clamp(28px,4vw,48px)}
.kaydir-ray{
  display:flex;gap:clamp(20px,3vw,36px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 0;                      /* odak halkası kırpılmasın */
  scrollbar-width:none;-ms-overflow-style:none;
}
.kaydir-ray::-webkit-scrollbar{display:none}
.kaydir-ray > *{flex:0 0 clamp(250px,28vw,330px);scroll-snap-align:start}
@media (max-width:560px){.kaydir-ray > *{flex-basis:78vw}}

/* Oklar kartın üstüne binmesin diye yarı yarıya dışarı taşıyor;
   kartın yarısı ok altında kalırsa "devamı var" değil "bozuk" görünüyor. */
.kaydir-ok button{transform:translateX(-50%)}
.kaydir-ok button + button{transform:translateX(50%)}

/* Gidecek yer yoksa ok da yok — tıklayınca hiçbir şey olmayan bir
   düğme, olmayan düğmeden kötüdür. */
.kaydir-ok button[disabled]{opacity:0;pointer-events:none}
.kaydir[data-tasma="yok"] .kaydir-ok{display:none}

/* Dokunmatikte ok yok: parmak zaten kaydırıyor ve dar ekranda düğme
   kartın üstüne biniyordu. Yarısı görünen sonraki kart "devamı var"ı
   oktan daha iyi anlatıyor. */
@media (hover:none){
  .kaydir-ok{display:none}
}

@media (prefers-reduced-motion:reduce){
  .kaydir-ray{scroll-behavior:auto}
}

/* ---------- test daveti (.ydt) ---------- */
/* İki aşama: 1 dk sonra modal, kapatılırsa 3 dk sonra alt şerit.
   Testin linki yalnız üç sayfada vardı; eğitimlere dalan kişi hiç görmüyordu.

   Token'lar fallback'li: sayfalar kendi :root'unda tanımlıyor ama test
   sayfası farklı adlar kullanıyor (--murekkep vb.). Orada zaten çıkmıyor,
   yine de renksiz kalmasın. */

/* ── ortak ── */
.ydt-kapat{
  position:absolute;top:0;right:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  font:300 22px/1 'Archivo',sans-serif;color:var(--gray,#8A8A8A);
  transition:color .3s cubic-bezier(.2,.8,.2,1);
}
.ydt-kapat:hover{color:var(--ink,#131313)}
.ydt-btn{
  display:inline-block;padding:15px 26px;min-height:44px;
  background:var(--ink,#131313);color:var(--bg,#fff);
  font:400 15px/1.2 'Inter',sans-serif;text-decoration:none;
  border:1px solid var(--ink,#131313);
  transition:background .35s cubic-bezier(.2,.8,.2,1),color .35s cubic-bezier(.2,.8,.2,1);
}
.ydt-btn:hover{background:var(--acc2,#E4633D);border-color:var(--acc2,#E4633D)}
.ydt-vazgec{
  background:transparent;border:0;cursor:pointer;padding:12px 4px;min-height:44px;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:1rem;
  color:var(--gray,#8A8A8A);transition:color .3s cubic-bezier(.2,.8,.2,1);
}
.ydt-vazgec:hover{color:var(--ink,#131313)}

/* ── 1. aşama: modal ── */
/* Karartma düz renk, degrade değil (kural 6). */
.ydt-perde{
  position:fixed;inset:0;z-index:850;
  background:rgba(19,19,19,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .4s cubic-bezier(.2,.8,.2,1);
}
.ydt-perde.acik{opacity:1}
.ydt-kutu{
  position:relative;width:100%;max-width:760px;
  background:var(--bg,#fff);border:1px solid var(--ink,#131313);
  display:flex;align-items:stretch;
  transform:translateY(14px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
/* Görsel: zemin aksan rengi, üstünde gri tonlamalı fotoğraf multiply ile.
   Fotoğraf özünde s/b kalıyor (kural 7), renk onun üstüne biniyor — duotone.
   Ana sayfadaki test bölümünün posteri; yeni dosya üretilmedi, çoğu
   ziyaretçide zaten önbellekte. */
.ydt-gorsel{
  flex:0 0 40%;position:relative;overflow:hidden;
  background:var(--acc2,#E4633D);
}
/* Görsel mutlak konumda: akışta bıraksaydık kendi en-boy oranı (684x1200)
   kutunun yüksekliğini dayatıyor ve metin sütununda ölü boşluk kalıyordu.
   Şimdi yüksekliği metin belirliyor, görsel o alanı dolduruyor. */
.ydt-gorsel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  display:block;filter:grayscale(1) contrast(1.06);mix-blend-mode:multiply;
}
.ydt-govde{flex:1 1 auto;padding:clamp(30px,4vw,44px);min-width:0}
/* Metin kısa kaldığında kutu bodur görünmesin. */
@media (min-width:641px){ .ydt-kutu{min-height:330px} }
.ydt-perde.acik .ydt-kutu{transform:none}
.ydt-etiket{
  font:500 .72rem/1 'Archivo',sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gray,#8A8A8A);
}
.ydt-bas{
  margin:14px 0 12px;
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.9rem,4.4vw,2.5rem);line-height:1.1;color:var(--ink,#131313);
}
.ydt-metin{
  margin:0 0 26px;font:400 .95rem/1.6 'Inter',sans-serif;
  color:var(--gray,#8A8A8A);max-width:34em;
}
.ydt-alt{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ── 2. aşama: alt şerit ── */
.ydt-serit{
  position:fixed;left:0;right:0;bottom:0;z-index:800;overflow:hidden;
  background:var(--acc4,#FEBD40);border-top:1px solid var(--ink,#131313);
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.ydt-serit.acik{transform:none}
/* Fotoğraf SIRADA, arka planda değil. Arka plan katmanı olarak denendi:
   koyu parmaklıklar metnin altına düşüp okunurluğu bozuyordu. Şimdi
   etiketle metin arasında kendi sütununda; multiply ile kâğıt zemini
   sarıya karışıyor, yalnız parmaklıklar görünüyor, kenar maskesi
   gerekmiyor. */
.ydt-serit-fon{
  position:relative;align-self:stretch;flex:0 1 clamp(160px,22vw,320px);
  min-width:0;pointer-events:none;
}
.ydt-serit-fon img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  display:block;filter:grayscale(1) contrast(1.06);mix-blend-mode:multiply;
}
.ydt-serit-ic{
  position:relative;max-width:1280px;margin:0 auto;
  padding:0 clamp(56px,6vw,72px) 0 clamp(20px,4vw,48px);
  min-height:84px;
  display:flex;align-items:center;gap:0 clamp(16px,2vw,30px);flex-wrap:nowrap;
}
/* acc4 üzerine ink — kılavuzdaki kontrast eşlemesi */
.ydt-serit-etiket{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ink,#131313);flex-shrink:0;
}
.ydt-serit p{margin:0;font:400 .95rem/1.5 'Inter',sans-serif;color:var(--ink,#131313);flex:1 1 auto}
.ydt-serit em{font-family:'Instrument Serif',serif;font-style:italic}
.ydt-serit .ydt-kapat{top:50%;transform:translateY(-50%);right:clamp(6px,1vw,16px);color:var(--ink,#131313)}
.ydt-serit .ydt-kapat:hover{opacity:.55}
.ydt-serit .ydt-btn{padding:13px 24px;font-size:14px;flex-shrink:0}
/* Sarı şeritte acc2 turuncu hover okunmuyor; ink kalıp hafif açılıyor. */
.ydt-serit .ydt-btn:hover{background:#2E2E2E;border-color:#2E2E2E}

@media (max-width:640px){
  /* Telefonda yan yana sığmıyor: görsel üstte, alçak bir şerit olarak. */
  .ydt-kutu{flex-direction:column}
  .ydt-gorsel{flex:0 0 auto;height:clamp(120px,26vw,170px)}
  .ydt-gorsel img{object-position:center 38%}
}
@media (max-width:860px){
  /* Fotoğraf dar ekranda yer kaplıyor; etiket ve buton kalsın. */
  .ydt-serit-fon{display:none}
}
@media (max-width:640px){
  /* Telefonda iki sütun: solda metin, sağda etiket + buton alt alta.
     Kapatma düğmesi etiketin yanında — sağ sütunun küçük başlığı gibi. */
  .ydt-serit-ic{
    display:grid;flex-wrap:nowrap;
    grid-template-columns:1fr auto auto;
    grid-template-areas:"metin etiket kapat" "metin buton buton";
    align-items:center;gap:6px 12px;
    padding:14px clamp(14px,4vw,20px);min-height:0;
  }
  /* Metin bloğunun altı butonun alt kenarına otursun — ikisi de
     kendi alanının dibine yaslanıyor, alanların dibi aynı satır. */
  .ydt-serit p{grid-area:metin;font-size:.82rem;line-height:1.45;align-self:end}
  /* Davet cümlesi mockup'ta sans satırın 1,5 katı ve kendi satırlarında.
     Mobilde blok oluyor — <br> yerine bu, çünkü kırılma yerini sütun
     genişliği belirlesin, elle sayılmış bir nokta değil. */
  .ydt-serit em{display:block;font-size:1.25rem;line-height:1.08;margin:0 0 6px}
  /* Kırılma noktası elle: doğal sarma "Ne kadar yaratıcı / olduğunu"
     diye bölüp cümleyi garip bir yerden kesiyordu. */
  .ydt-serit .ydt-kir{display:block}
  .ydt-serit-etiket{grid-area:etiket;justify-self:end;font-size:1.25rem}
  /* Dar yan boşluk: buton ne kadar şişerse metin sütunu o kadar
     daralıyor, davet cümlesi gereksiz yere kırılıyordu. */
  .ydt-serit .ydt-btn{grid-area:buton;justify-self:end;align-self:end;padding:13px 18px}
  /* Artık ızgarada; mutlak konumdan çıkıyor. */
  .ydt-serit .ydt-kapat{
    grid-area:kapat;position:static;transform:none;
    width:34px;height:34px;justify-self:end;
  }
  /* Görünen daire küçüldü ama dokunma hedefi 44px kalsın (kural 9). */
  .ydt-serit .ydt-kapat::before{
    content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
    transform:translate(-50%,-50%);
  }
  .ydt-serit .ydt-kapat{position:relative}
}
@media (max-width:560px){
  .ydt-govde{padding:26px 22px}
  .ydt-alt{gap:10px}
  .ydt-alt .ydt-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ydt-perde,.ydt-kutu,.ydt-serit{transition:none}
  .ydt-kutu{transform:none}
  .ydt-serit{transform:none;display:none}
  .ydt-serit.acik{display:block}
}