/* ============================================================
   Ramazan Akbaş — yazar sitesi
   Palet: gri-yeşil zemin + beyaz kart | Vurgu: zeytin yeşili
   Tipografi: Archivo (başlık) + Inter (metin) — kendi sunucumuzda
   ============================================================ */
:root{
  --page:   #F1F0EB;
  --card:   #FFFFFF;
  --card-2: #F7F6F2;
  --line:   #E6E4DD;

  --ink:    #1D211C;
  --mut:    #5F655B;   /* referanstaki #767C72 küçük yazıda okunmuyordu (4.29) */
  --fai:    #767C72;   /* referanstaki #A2A79D yetersizdi (2.46) */

  --olive:   #414A36;
  --olive-lt:#5C6A4A;
  --sage:    #A9B394;

  --err:    #8C2F22;
  --err-bg: #FBEDE9;
  --ok:     #2F6B3F;
  --ok-bg:  #EDF4EE;

  --r-lg:26px; --r-md:18px; --r-sm:12px; --pill:999px;
  --sh:    0 1px 2px rgba(29,33,28,.04), 0 6px 18px rgba(29,33,28,.05);
  --sh-up: 0 2px 4px rgba(29,33,28,.06), 0 16px 34px rgba(29,33,28,.1);

  --disp:"Archivo", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --wrap:1240px;
  --gut:clamp(14px,3vw,28px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--olive); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.card{background:var(--card); border-radius:var(--r-lg); padding:clamp(26px,4vw,52px)}
.block{margin-bottom:clamp(16px,2vw,22px)}
/* Üst menü ile ilk kart arasındaki aralık, kartlar arasındakiyle aynı olsun. */
main.wrap{padding-top:clamp(16px,2vw,22px)}

/* ---------- tipografi ---------- */
.d1{font-family:var(--disp); font-weight:800; font-size:clamp(32px,5.4vw,68px); line-height:1.02; letter-spacing:-.025em; text-transform:uppercase}
.d2{font-family:var(--disp); font-weight:700; font-size:clamp(22px,3vw,36px); line-height:1.08; letter-spacing:-.018em; text-transform:uppercase}
/* Sayfa başlığı: anasayfanın 68px vitrin başlığından bir kademe küçük.
   Uzun başlıklar ("Programlar, videolar, röportajlar") tek satıra sığsın diye. */
.d1--sayfa{font-size:clamp(26px,3.4vw,42px)}
.d3{font-family:var(--disp); font-weight:700; font-size:clamp(17px,2vw,23px); line-height:1.2; letter-spacing:-.01em; text-transform:uppercase}
.tag{display:inline-block; font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.eyebrow{display:inline-block; background:var(--card-2); color:var(--olive); padding:8px 15px; border-radius:var(--pill); margin-bottom:20px; font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.lede{color:var(--mut); max-width:54ch; font-size:16px}
.mutedtag{color:var(--fai); font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
.prose p{color:var(--mut); font-size:15px; line-height:1.75}
/* Giriş cümlesi yazı içinde de bir punto büyük kalsın — .prose p daha özgül. */
.prose p.lede{font-size:16px}
.prose p + p{margin-top:14px}
.prose h2{font-family:var(--disp); font-weight:700; font-size:clamp(18px,2.2vw,25px); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); margin:28px 0 12px}
.prose em{font-style:italic}
.quote{margin:26px 0; padding:26px 30px; background:var(--card-2); border-left:3px solid var(--sage); border-radius:var(--r-sm)}
.quote blockquote{margin:0; font-size:19px; line-height:1.55; color:var(--ink); font-weight:500}

/* ---------- düğme / bağlantı ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; justify-content:center; font-family:var(--disp); font-weight:600; font-size:12.5px; padding:15px 26px; border-radius:var(--pill); border:1px solid transparent; cursor:pointer; text-align:center; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--dark{background:var(--olive); color:#fff}
.btn--dark:hover{background:var(--olive-lt); color:#fff}
.btn--light{background:var(--card-2); color:var(--ink); border-color:var(--line)}
.btn--light:hover{background:#EDEBE4; color:var(--ink)}
.btn--sm{padding:11px 18px; font-size:11.5px}
/* WhatsApp düğmesi — markanın yeşili; numara yazılmaz, düğme zaten oraya götürür */
.btn--wa{background:#25D366; color:#fff; width:100%}
.btn--wa:hover{background:#1FB755; color:#fff}
.btn--wa svg{flex:none}
.arrow{width:14px;height:14px;flex:none}

/* "Tüm kitaplar →" gibi bağlantılar 20 px yüksekliğindeydi; parmakla basmak için ince.
   Dikey boşluk eklendi — görünüş aynı, dokunma alanı 28 px'e çıktı. */
.more{display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:600; font-size:12px; color:var(--olive); transition:gap .25s var(--ease); padding-block:5px}
/* Alt bilgideki tasarım bağlantısı da parmak payı alsın */
.foot-base a{display:inline-block; padding-block:5px}
/* Klavyeyle gezen okur için: Tab'a basınca beliren "İçeriğe atla" bağlantısı. */
.atla{position:absolute; left:-9999px; top:0; z-index:200; background:var(--olive); color:#fff;
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0; font-family:var(--disp); font-weight:600; font-size:13px}
.atla:focus{left:0}
.more:hover{gap:13px; color:var(--olive-lt)}

.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(26px,3vw,38px)}

/* ---------- üst menü ---------- */
.site-head{position:sticky; top:0; z-index:120; background:rgba(241,240,235,.9); backdrop-filter:blur(14px);
  /* Sayfa kayarken üst şerit içerikten ayrılsın diye ince bir alt gölge. */
  box-shadow:0 1px 0 rgba(29,33,28,.07), 0 8px 20px rgba(29,33,28,.08)}
.site-head .wrap{display:flex; align-items:center; gap:20px; height:80px}
.logo{display:flex; align-items:center; gap:12px}
.logo__mark{width:38px;height:38px;border-radius:11px; background:linear-gradient(140deg,var(--sage),var(--olive)); flex:none; overflow:hidden}
.logo__mark img{width:100%;height:100%;object-fit:cover}
.logo__t{font-family:var(--disp); font-weight:800; font-size:15.5px; letter-spacing:.13em; text-transform:uppercase; line-height:1.1}
.logo__t small{display:block; font-family:var(--body); font-weight:500; font-size:8.5px; letter-spacing:.24em; color:var(--fai); margin-top:3px; text-transform:uppercase}
.nav{display:flex; gap:26px; margin-inline:auto; flex-wrap:wrap}
.nav a{font-size:13.5px; font-weight:500; color:var(--mut); transition:color .25s}
.nav a:hover{color:var(--ink)}
/* Bulunulan sayfa: sekmelerdeki (.tabs a.is-active) ile aynı dil — dolu zeytin hap. */
.nav a[aria-current]{color:#fff; font-weight:600; background:var(--olive); border-radius:var(--pill); padding:8px 15px; margin:-8px -4px}
.menu-ac{display:none; background:none; border:1px solid var(--line); border-radius:11px; width:40px;height:40px; cursor:pointer; color:var(--ink); font-size:17px; align-items:center; justify-content:center}
@media(max-width:1060px){
  .nav{display:none; position:absolute; left:var(--gut); right:var(--gut); top:74px; background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-up); flex-direction:column; gap:0; padding:10px}
  .nav.acik{display:flex}
  .nav a{padding:12px 14px; border-radius:var(--r-sm); font-size:14.5px}
  .nav a:hover{background:var(--card-2)}
  /* Menü içinde de bulunulan sayfa dolu zeytin — satır boyu, kenardan kenara. */
  .nav a[aria-current]{background:var(--olive); color:#fff; border-radius:var(--r-sm); padding:12px 14px; margin:0}
  .menu-ac{display:flex; margin-inline-start:auto}
  .site-head .wrap{position:relative}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(120deg,#FFFFFF 0%, #FBFAF7 52%, #EDEDE5 100%); display:grid; grid-template-columns:1fr .8fr; gap:clamp(24px,4vw,56px); align-items:center; min-height:clamp(380px,44vw,500px)}
.hero::after{content:""; position:absolute; right:-140px; top:-140px; width:440px;height:440px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(169,179,148,.28), transparent 68%)}
.hero__copy{position:relative; z-index:2}
/* Anasayfanın büyük başlığında yazarın adı da geçsin (arama için).
   Kitap adı görsel olarak yine en büyük öge; ad üstünde ince bir satır. */
.hero__ad{display:block; font-size:clamp(13px,1.5vw,17px); font-weight:600; letter-spacing:.1em; color:var(--mut); margin-bottom:10px}
.hero__sub{font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin:16px 0 20px}
.hero__copy p.lede{margin-bottom:32px}
.hero__cta{display:flex; gap:11px; flex-wrap:wrap}

.stack{position:relative; z-index:2; height:clamp(300px,36vw,400px)}
.stack .kapak{position:absolute; top:50%}
.stack .kapak--main{left:12%; width:62%; transform:translateY(-50%) perspective(1400px) rotateY(-8deg); z-index:3}
.stack .kapak--b1{left:-2%; width:46%; transform:translateY(-46%) rotate(-7deg); opacity:.5; z-index:1; filter:saturate(.5)}
.stack .kapak--b2{left:62%; width:48%; transform:translateY(-52%) rotate(6deg); opacity:.5; z-index:2; filter:saturate(.5)}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .stack{height:300px; order:-1}
  .stack .kapak--main{left:20%; width:52%}
  .stack .kapak--b1{left:4%; width:40%}
  .stack .kapak--b2{left:60%; width:42%}
}

/* ---------- kitap kapağı (gerçek görsel) ---------- */
.kapak{
  aspect-ratio:2/3; border-radius:8px; position:relative; overflow:hidden;
  background:#20241F center/cover no-repeat;
  box-shadow:0 1px 3px rgba(29,33,28,.16), 0 14px 28px rgba(29,33,28,.16), 0 40px 60px rgba(29,33,28,.12);
}
.kapak img{width:100%;height:100%;object-fit:cover}
.kapak::before{content:""; position:absolute; left:0;top:0;bottom:0; width:7px; z-index:2; background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(0,0,0,.22) 60%,transparent)}
.kapak--bos{display:grid; place-content:center; background:linear-gradient(140deg,#EEEDE7,#D6D8CC)}
.kapak--bos span{font-family:var(--disp); font-weight:600; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--fai)}

/* ---------- biyografi ---------- */
.bio{display:grid; grid-template-columns:.66fr 1fr; gap:clamp(26px,4vw,60px); align-items:center}
.portrait{position:relative; aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden; background:var(--card-2)}
.portrait img{width:100%;height:100%;object-fit:cover; object-position:top center}
.portrait__ph{position:absolute; inset:0; display:grid; place-content:center; background:linear-gradient(140deg,#EEEDE7,#D6D8CC)}
.portrait__ph span{font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--fai)}
.bio h2{margin-bottom:20px}
.bio p + p{margin-top:14px}
.bio .more{margin-top:26px}
@media(max-width:820px){.bio{grid-template-columns:1fr}}

/* ---------- kitap kartları ---------- */
.grid-books{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.bcard{background:var(--card); border-radius:var(--r-md); padding:14px 14px 20px; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.bcard:hover{transform:translateY(-6px); box-shadow:var(--sh-up)}
.bcard__top{background:var(--card-2); border-radius:var(--r-sm); padding:18px 20px; margin-bottom:16px}
.bcard h3{font-family:var(--disp); font-weight:700; font-size:14px; text-transform:uppercase; line-height:1.28; margin-bottom:9px}
.bcard .mutedtag{display:block}
@media(max-width:900px){
  .grid-books{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 30px yan boşluk dar ekranda kapağa yer bırakmıyordu */
  .bcard__top{padding:16px}
}
/* Telefonda kapak büyük görünsün: kartın kendi iç boşluğu (zeminle aynı renk, görünmüyordu) kalkar */
@media(max-width:600px){
  .grid-books{gap:22px 14px}
  .bcard{padding:0 0 14px}
  .bcard__top{padding:12px; margin-bottom:12px}
}

/* ---------- video kartları ---------- */
.grid-vid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.vcard{background:var(--card); border-radius:var(--r-md); padding:12px 12px 20px; border:none; text-align:left; cursor:pointer; width:100%; font:inherit; color:inherit;
  /* <button> kendinden uzunsa içeriğini dikeyde ORTALAR; başlığı kısa olan
     karttaki kapak aşağı kayıyordu. Yukarıdan hizalanması için flex. */
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.vcard:hover{transform:translateY(-6px); box-shadow:var(--sh-up)}
.vcard__frame{display:block; position:relative; aspect-ratio:16/10; border-radius:var(--r-sm); overflow:hidden; background:linear-gradient(140deg,#E7E7E0,#C3C7BA); margin-bottom:16px}
/* Kapaklar tamamen siyah-beyazdı ve rengi yalnızca fareyle üstüne gelince açılıyordu —
   telefonda böyle bir hareket olmadığı için ziyaretçilerin çoğu hep gri görüyordu.
   Artık hafifçe yumuşatılmış renkli: yüzler canlı, parlak kapaklar sayfayı bastırmıyor. */
.vcard__frame img{width:100%;height:100%;object-fit:cover; filter:grayscale(.2) saturate(.9); transition:filter .5s var(--ease), transform .6s var(--ease)}
.vcard:hover .vcard__frame img{filter:none; transform:scale(1.03)}
.vcard__play{position:absolute; left:10px; bottom:10px; width:36px;height:36px; border-radius:50%;
  /* Ortada değil sol altta — süre rozeti sağ altta, ikisi çakışmıyor.
     Yarı saydam: kapak fotoğrafı simgenin altından görünsün. */
  background:rgba(255,255,255,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-content:center; color:var(--olive); transition:background .35s var(--ease), color .35s var(--ease); box-shadow:var(--sh)}
.vcard:hover .vcard__play{background:var(--olive); color:#fff}
.vcard__dur{position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.92); color:var(--ink); padding:5px 10px; border-radius:var(--pill); font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.vcard h3{font-family:var(--disp); font-weight:700; font-size:14px; text-transform:uppercase; line-height:1.28; margin-bottom:8px; padding-inline:4px}
.vcard .mutedtag{padding-inline:4px; display:block}
@media(max-width:820px){.grid-vid{grid-template-columns:1fr}}

/* ---------- makale satırları ---------- */
.writings{display:grid; grid-template-columns:.62fr 1fr; gap:clamp(26px,4vw,64px)}
.writings .more{margin-top:24px}
.entry{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:22px; border-radius:var(--r-md); background:var(--card-2); transition:background .35s, transform .35s var(--ease)}
.entry + .entry{margin-top:11px}
.entry:hover{background:#EDEBE3; transform:translateX(4px)}
.entry__date{background:#fff; border-radius:var(--pill); padding:7px 13px; font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--olive); white-space:nowrap}
.entry h3{font-family:var(--disp); font-weight:700; font-size:clamp(15px,1.9vw,19px); text-transform:uppercase; line-height:1.24; margin-bottom:7px}
.entry p{font-size:13.5px; color:var(--mut); max-width:56ch}
.entry__go{width:36px;height:36px;border-radius:50%; background:#fff; display:grid; place-content:center; color:var(--olive); flex:none; transition:background .35s, color .35s}
.entry:hover .entry__go{background:var(--olive); color:#fff}
/* Kartlar eşit boyda: başlık en çok 2 satır, özet TAM 2 satır (uzunu "…" ile kısalır,
   kısası da 2 satırlık yer tutar), tarih etiketi sabit genişlikte → başlıklar aynı hizada.
   Özetin tamamı makalenin kendi sayfasında görünür. Panelde önerilen özet: 150 karakter. */
.entry h3,.entry p{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
.entry p{line-height:1.6; min-height:3.2em}
.entry__date{min-width:132px; text-align:center}
/* Tarihi girilmemiş makale: görünmez bir tarih etiketi yer tutar → başlık aynı hizada kalır,
   dar ekranda kart aynı boyda olur. (:has bilmeyen eski tarayıcı bu kuralı atlar; kart eskisi gibi görünür.) */
.entry:not(:has(.entry__date))::before{content:"\00a0"; min-width:132px; padding:7px 13px; font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.1em; visibility:hidden}
.entry{min-height:142px}
@media(max-width:900px){.writings{grid-template-columns:1fr} .entry{grid-template-columns:1fr; gap:12px; align-items:start; min-height:0} .entry__date{justify-self:start} .entry__go{display:none}
  /* Dar ekranda da eşit boy: yazı bloğu 2 satır başlık + 2 satır özet kadar yer tutar
     (başlık tek satırsa boşluk kartın altında kalır). 2.48 = 2 satır × 1.24 satır yüksekliği. */
  .entry > div{min-height:calc(2.48 * clamp(15px,1.9vw,19px) + 7px + 3.2 * 13.5px)}}

/* ---------- gezi kartları ---------- */
.grid-trips{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tcard{position:relative; overflow:hidden; border-radius:var(--r-md); min-height:250px; display:flex; align-items:flex-end; padding:26px; color:#fff; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.tcard:hover{transform:translateY(-6px); box-shadow:var(--sh-up)}
.tcard__img{position:absolute; inset:0; background:linear-gradient(150deg,#8FA07E,#39412C)}
.tcard__img img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)}
.tcard:hover .tcard__img img{transform:scale(1.05)}
.tcard:nth-child(3n+2) .tcard__img{background:linear-gradient(150deg,#8B9AA5,#2B3540)}
.tcard:nth-child(3n+3) .tcard__img{background:linear-gradient(150deg,#B09B78,#40352A)}
.tcard__veil{position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,24,18,.86) 0%, rgba(20,24,18,.3) 58%, rgba(20,24,18,.06) 100%)}
.tcard__in{position:relative; z-index:2}
.tcard .tag{background:rgba(255,255,255,.2); backdrop-filter:blur(6px); padding:6px 12px; border-radius:var(--pill); margin-bottom:12px}
.tcard h3{font-family:var(--disp); font-weight:700; font-size:19px; text-transform:uppercase; line-height:1.18; margin-bottom:9px}
.tcard p{font-size:13px; color:rgba(255,255,255,.85)}
@media(max-width:880px){.grid-trips{grid-template-columns:1fr}}

/* ---------- iletişim bandı ---------- */
.contact{position:relative; overflow:hidden; border-radius:var(--r-lg); background:linear-gradient(105deg,#DCE0D2 0%, #C3CBB0 48%, #A9B394 100%); padding:clamp(30px,4.5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.contact::after{content:""; position:absolute; right:-80px; top:-100px; width:340px;height:340px;border-radius:50%; background:rgba(255,255,255,.2)}
.contact > *{position:relative; z-index:2}
.contact .eyebrow{background:rgba(255,255,255,.75)}
.contact p{color:#333B2C; margin-top:14px; max-width:46ch; font-size:14.5px}

/* ---------- yan sütun / künye ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(26px,4vw,56px)}
.aside{display:flex; flex-direction:column; gap:26px}
.aside .kutu{background:var(--card-2); border-radius:var(--r-md); padding:22px}
.aside .k{display:block; font-size:13.5px; line-height:1.7; color:var(--mut)}
.aside h4{font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px}
/* minmax(0,…): içerideki geniş bir öğe (ör. Dinle çubuğu) sütunu kartın dışına itemesin */
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---------- sekmeler ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}
.tabs a{font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:11px 18px; border-radius:var(--pill); background:var(--card-2); color:var(--mut); transition:background .25s,color .25s}
.tabs a:hover{background:#EDEBE4; color:var(--ink)}
.tabs a.is-active{background:var(--olive); color:#fff}

/* ---------- basın / röportaj kartı ---------- */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.pcard{background:var(--card-2); border-radius:var(--r-md); padding:26px; display:flex; flex-direction:column; gap:12px; transition:background .35s, transform .35s var(--ease)}
a.pcard:hover{background:#EDEBE3; transform:translateY(-4px)}
/* Basın kartındaki fotoğraf */
.pcard__foto{display:block; aspect-ratio:16/10; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); margin-bottom:4px}
.pcard__foto img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease)}
a.pcard:hover .pcard__foto img{transform:scale(1.04)}
/* Röportaj sayfasındaki tek video: başlık zaten sayfanın en üstünde yazıyor.
   Kart başlığı gözden gizleniyor ama ekran okuyucular için duruyor. */
.vid-tek .vcard h3{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* Videolu röportaj kartındaki oynat işareti — video kartlarındakiyle aynı görünüm */
.pcard__foto{position:relative}
.pcard__play{position:absolute; left:10px; bottom:10px; width:36px;height:36px; border-radius:50%;
  background:rgba(255,255,255,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-content:center; color:var(--olive); transition:background .35s var(--ease), color .35s var(--ease); box-shadow:var(--sh)}
a.pcard:hover .pcard__play{background:var(--olive); color:#fff}
.pcard .src{font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fai)}
/* Alıntı metni uzun olabiliyor — büyük harf ve başlık yazı tipi okumayı zorlaştırıyordu.
   Artık gövde metni gibi: normal harfler, okunur satır aralığı. Kaynak adı (.src) kalın kalıyor. */
.pcard .q{font-family:var(--body); font-weight:400; font-size:15px; line-height:1.62; text-transform:none; letter-spacing:0; color:var(--ink)}
.pcard p{font-size:13.5px; color:var(--mut)}
/* Yan sütundaki kitap bağlantıları — parmak payı */
.aside a.k{padding-block:4px}
@media(max-width:880px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- form ---------- */
.form{display:flex; flex-direction:column; gap:18px}
.form label{display:block}
.form .lbl{display:block; font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:8px}
.form input,.form select,.form textarea{width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2); font:15px/1.6 var(--body); color:var(--ink); transition:border-color .2s, background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--sage); background:#fff}
.form textarea{resize:vertical; min-height:150px}
.notice{border-radius:var(--r-sm); padding:14px 18px; font-size:14px; background:var(--ok-bg); color:var(--ok); border-left:3px solid var(--ok)}
.notice--err{background:var(--err-bg); color:var(--err); border-left-color:var(--err)}

/* ---------- alt bilgi ---------- */
.site-foot{margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--line); padding-top:46px}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:clamp(24px,4vw,56px); padding-bottom:42px}
.foot-grid p{font-size:13px; color:var(--mut); max-width:36ch; margin-top:16px}
.fcol h4{font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:15px}
.fcol a,.fcol span{display:block; font-size:13.5px; color:var(--mut); padding:5px 0; transition:color .25s}
.fcol a:hover{color:var(--olive)}
.fcol .with-ic{display:flex; gap:9px; align-items:center}
/* Alt bilgideki WhatsApp satırı — simge yazıyla aynı renkte, üstüne gelince birlikte değişir */
.fcol .wa-satir svg{color:inherit; flex:none}
.social{display:flex; gap:9px; margin-top:22px}
.social a{width:38px;height:38px;border-radius:11px; background:var(--card); display:grid; place-content:center; color:var(--mut); transition:background .25s,color .25s,transform .25s}
.social a:hover{background:var(--olive); color:#fff; transform:translateY(-2px)}

/* Üst menüdeki simge şeridi — .social'dan SONRA gelmeli, yoksa eziliyor. */
.social--head{margin-top:0}
.social--head a{width:36px;height:36px;border-radius:10px}
.social--menu{display:none}
@media(max-width:1060px){
  .social--head{display:none}
  .social--menu{display:flex; margin-top:8px; padding:12px 14px 4px; border-top:1px solid var(--line)}
  .social--menu a{background:var(--card-2)}
}
.foot-base{border-top:1px solid var(--line); padding:20px 0 34px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--fai)}
.foot-base a:hover{color:var(--olive)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* ---------- yukarı çık ---------- */
.to-top{position:fixed; right:22px; bottom:88px; z-index:80; width:46px;height:46px; border-radius:50%; border:none; background:var(--olive); color:#fff; font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s; box-shadow:var(--sh-up)}
.to-top.is-visible{opacity:1; pointer-events:auto; transform:none}
.to-top:hover{background:var(--olive-lt)}

/* ---------- yüzen WhatsApp düğmesi ---------- */
.wa-dugme{position:fixed; right:22px; bottom:22px; z-index:80; width:52px;height:52px;
  border-radius:50%; background:#25D366; color:#fff; display:grid; place-content:center;
  box-shadow:var(--sh-up); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.wa-dugme:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 6px 14px rgba(37,211,102,.4)}
.wa-dugme:focus-visible{outline:3px solid var(--olive); outline-offset:3px}
/* Yukarı çık oku görünmüyorken WhatsApp yine en altta durur */
@media(max-width:600px){
  .wa-dugme{width:48px;height:48px; right:16px; bottom:16px}
  .to-top{right:16px; bottom:76px; width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){.wa-dugme{transition:none}}

/* ---------- video penceresi ---------- */
/* Beyaz kart çerçevesi yok: koyu zemin + ortada video. Boş alana tıklayınca
   kapanabilmesi için üst/alt şeritler ve oklar "absolute" — tıklama .modal'a gidiyor. */
.modal{position:fixed; inset:0; z-index:150; background:rgba(16,19,14,.96); display:none;
  align-items:center; justify-content:center;
  /* alt boşluk başlık şeridini ayırır — video başlığın üstüne binmesin */
  padding:clamp(56px,8vh,80px) clamp(14px,4vw,76px) clamp(98px,13vh,116px)}
.modal.is-open{display:flex}
/* Alçak ekranlarda (yatay telefon, kısa pencere) video taşmasın:
   genişlik, kalan yüksekliğe göre de sınırlanıyor. 196px = üst+alt boşluk. */
.modal .stage{width:min(1120px, 100%, calc((100vh - 196px) * 16 / 9));
  width:min(1120px, 100%, calc((100dvh - 196px) * 16 / 9));
  aspect-ratio:16/9; border-radius:var(--r-sm); background:#000; overflow:hidden; display:flex; align-items:center; justify-content:center; flex:none}
.modal .stage iframe{width:100%;height:100%;border:none}
.modal .stage .empty{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8A9080; text-align:center; padding:20px}

.vp-ust{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:16px; padding:16px 20px}
.vp-sayac{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage)}
.vp-ust .vp-dg{margin-left:auto}
.vp-dg{width:44px;height:44px;border-radius:50%; border:1px solid rgba(237,237,231,.26); background:rgba(237,237,231,.07); color:#EDEDE7; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .16s,border-color .16s}
.vp-dg:hover{background:rgba(237,237,231,.17); border-color:rgba(237,237,231,.5)}
.vp-ok{position:absolute; top:50%; transform:translateY(-50%); z-index:2; font-size:26px; line-height:1}
.vp-ok.geri{left:16px} .vp-ok.ileri{right:16px}
.vp-alt{position:absolute; left:0; right:0; bottom:0; padding:14px 24px 24px; text-align:center; color:#C9CCC2}
.vp-alt h3{font-family:var(--disp); font-weight:700; font-size:clamp(14px,2vw,18px); text-transform:uppercase; letter-spacing:-.01em; color:#EDEDE7}
.vp-meta{display:block; font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#6E7468; margin-top:7px}
@media(max-width:700px){
  .vp-ok{display:none}
  .modal{padding:56px 14px 100px}
  .modal .stage{width:min(100%, calc((100vh - 156px) * 16 / 9)); width:min(100%, calc((100dvh - 156px) * 16 / 9))}
}
/* Telefon yatay tutulunca: şeritler inceltilir ki videoya yer kalsın. */
@media(max-height:520px){
  .modal{padding:58px clamp(14px,6vw,64px) 66px}
  .modal .stage{width:min(1120px, 100%, calc((100vh - 130px) * 16 / 9)); width:min(1120px, 100%, calc((100dvh - 130px) * 16 / 9))}
  .vp-ust{padding:8px 14px}
  .vp-dg{width:38px;height:38px;font-size:16px}
  .vp-alt{padding:8px 20px 12px}
  .vp-alt h3{font-size:13px}
  .vp-meta{margin-top:4px; font-size:9.5px}
}
.mini{font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.06em; padding:10px 16px; border-radius:var(--pill); border:1px solid var(--line); background:var(--card-2); color:var(--ink); cursor:pointer; transition:background .25s}
.mini:hover{background:#EDEBE4}
.between{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------- foto galeri + lightbox ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.buyutulebilir{display:block; width:100%; padding:0; border:none; background:var(--card-2); cursor:zoom-in; position:relative; overflow:hidden; border-radius:var(--r-md); aspect-ratio:4/3}

/* GEZİ GALERİSİ — kendini dengeleyen satırlar (Google Fotoğraflar düzeni).
   Her SATIRIN yüksekliği aynı; genişlik fotoğrafın oranına göre değişiyor.
   Böylece yataylar geniş, dikeyler dar yer kaplıyor ve satır kenardan
   kenara doluyor — sarkma, boşluk, dev/cüce farkı olmuyor.
   Oran gezi-detay.php'de 0.72–1.85 arasına kısılıyor. */
.galeri{display:flex; flex-wrap:wrap; gap:12px}
.galeri .buyutulebilir{
  --oran:1;
  --satir:250px;                       /* satır yüksekliği */
  aspect-ratio:auto;
  height:var(--satir);
  width:calc(var(--oran) * var(--satir));
  flex:1 1 calc(var(--oran) * var(--satir));
  margin:0;
}
/* Son satır tek başına kalırsa gerilip devleşmesin */
.galeri::after{content:""; flex-grow:1000; min-width:0}
@media(max-width:1100px){.galeri .buyutulebilir{--satir:200px}}
@media(max-width:760px){.galeri{gap:8px} .galeri .buyutulebilir{--satir:150px}}
.galeri .buyutulebilir img{width:100%; height:100%; display:block; object-fit:cover; object-position:center}
.buyutulebilir img{width:100%;height:100%;object-fit:cover; transition:transform .5s var(--ease)}
.buyutulebilir:hover img{transform:scale(1.05)}
.buyutulebilir figcaption{position:absolute; left:0;right:0;bottom:0; padding:24px 14px 12px; text-align:left; font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,transparent,rgba(20,24,18,.78)); opacity:0; transition:opacity .25s}
.buyutulebilir:hover figcaption,.buyutulebilir:focus-visible figcaption{opacity:1}
.ph{background:linear-gradient(140deg,#EEEDE7,#D6D8CC); border-radius:var(--r-md); display:flex; align-items:flex-end; padding:14px}
.ph span{font-family:var(--disp); font-weight:600; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fai)}
.ph--4x3{aspect-ratio:4/3}
.ph--16x9{aspect-ratio:16/9}

.lb{position:fixed; inset:0; z-index:150; background:rgba(16,19,14,.96); display:none; flex-direction:column; touch-action:pan-y}
.lb.acik{display:flex}
body.lb-kilit{overflow:hidden}
.lb-ust{display:flex; align-items:center; gap:16px; padding:16px 20px; flex:none; color:#EDEDE7}
.lb-sayac{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A9B394}
.lb-kapat{margin-left:auto}
.lb-dg{width:44px;height:44px;border-radius:50%; border:1px solid rgba(237,237,231,.26); background:rgba(237,237,231,.07); color:#EDEDE7; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .16s,border-color .16s,opacity .16s}
.lb-dg:hover:not([disabled]){background:rgba(237,237,231,.17); border-color:rgba(237,237,231,.5)}
.lb-dg[disabled]{opacity:.25; cursor:default}
.lb-sahne{flex:1; position:relative; overflow:hidden; min-height:0; cursor:grab}
.lb-sahne.suruklenirken{cursor:grabbing}
.lb-ray{display:flex; height:100%; will-change:transform}
.lb-ray.kayarken{transition:transform .32s var(--ease)}
.lb-kare{flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; padding:0 20px}
.lb-kare img{max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-sm); user-select:none; -webkit-user-drag:none}
.lb-ok{position:absolute; top:50%; transform:translateY(-50%); z-index:2}
.lb-ok.geri{left:16px} .lb-ok.ileri{right:16px}
.lb-alt{flex:none; padding:14px 24px 26px; text-align:center; color:#C9CCC2; min-height:58px}
.lb-yazi{font-size:15px; line-height:1.6; max-width:70ch; margin:0 auto}
.lb-ipucu{font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#6E7468; margin-top:8px}
@media(max-width:700px){.lb-ok{display:none} .lb-kare{padding:0 8px}}

/* ---------- yatay kaydırmalı şerit ---------- */
.serit-sar{position:relative}
.serit{display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scroll-behavior:smooth; padding:4px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.serit>*{flex:0 0 clamp(180px,22vw,238px); scroll-snap-align:start}
.serit::-webkit-scrollbar{height:6px}
.serit::-webkit-scrollbar-track{background:transparent}
.serit::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.serit.suruklenebilir{cursor:grab}
.serit.suruklenirken{cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; user-select:none}
.serit.suruklenirken a{pointer-events:none}
.serit-oklar{display:none; gap:8px}
.serit-sar.oklu .serit-oklar{display:flex}
.serit-ok{width:38px;height:38px;border-radius:50%; border:1px solid var(--line); background:var(--card-2); color:var(--olive); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,opacity .2s}
.serit-ok:hover:not([disabled]){background:#EDEBE4}
.serit-ok[disabled]{opacity:.3; cursor:default}
.serit-sar::before,.serit-sar::after{content:""; position:absolute; top:0; bottom:14px; width:48px; pointer-events:none; opacity:0; transition:opacity .25s; z-index:2}
.serit-sar::before{left:0; background:linear-gradient(90deg,var(--card),transparent)}
.serit-sar::after{right:0; background:linear-gradient(270deg,var(--card),transparent)}
.serit-sar.sol-var::before{opacity:1}
.serit-sar.sag-var::after{opacity:1}
@media(max-width:1000px){.serit-oklar{display:none !important}}

/* ---------- hareket ---------- */
.rise{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rise.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rise{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ---------- yazıyı paylaş (makale-detay.php, assets/js/paylas.js) ---------- */
.paylas{display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}
.paylas__baslik{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.paylas__dugmeler{display:flex; gap:8px; flex-wrap:wrap}
.paylas__dg{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card-2); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s, transform .25s var(--ease)}
.paylas__dg:hover{background:var(--olive); border-color:var(--olive); color:#fff; transform:translateY(-2px)}
.paylas__dg[hidden]{display:none}                 /* grid, [hidden]'ı ezmesin */
.paylas__dg:focus-visible{outline:2px solid var(--olive); outline-offset:2px}
.paylas__bilgi{font-size:13px; color:var(--ok); min-height:1em}

/* ---------- baskısı tükenen kitap + PDF düğmeleri (kitap-detay.php) ---------- */
.tukendi{margin:18px 0 18px; font-size:14px; line-height:1.6; color:var(--mut)}
.tukendi__etiket{display:inline-block; margin-right:8px; padding:5px 11px; border-radius:var(--pill); background:var(--err-bg); color:var(--err);
  font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; vertical-align:middle}
.btn__ek{font-weight:500; font-size:11px; opacity:.72; letter-spacing:0}

/* ---------- etkinlikler sayfası (etkinlikler.php) ---------- */
.etk-baslik{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:6px 0 16px}
.etk-bos{background:var(--card-2); border-radius:var(--r-md); padding:26px 24px; color:var(--mut); font-size:15px; line-height:1.65}
.etk-liste{display:grid; gap:14px}
.etk{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; padding:24px; border-radius:var(--r-md); background:var(--card-2); scroll-margin-top:100px}
/* Satırlar "auto 1fr": uzun fotoğrafın fazladan boyu ikinci satıra gider, düğmeler yazının hemen altında kalır */
.etk--fotolu{grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto 1fr}
.etk__tarih{width:84px; padding:12px 6px 11px; border-radius:var(--r-sm); background:var(--olive); color:#fff; text-align:center; display:grid; gap:1px}
.etk__gun{font-family:var(--disp); font-weight:700; font-size:32px; line-height:1}
.etk__ay{font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.etk__yil{font-size:11.5px; opacity:.72; font-variant-numeric:tabular-nums}
.etk__tarih--bos{background:var(--card); color:var(--olive); border:1px solid var(--line); padding-block:22px}
.etk__govde h3{font-family:var(--disp); font-weight:700; font-size:clamp(17px,2.1vw,22px); line-height:1.2; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:12px; overflow-wrap:anywhere}
.etk__bilgi{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px}
.etk__bilgi li{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink)}
.etk__bilgi svg{flex:none; color:var(--olive)}
.etk__yazi{font-size:14.5px; line-height:1.65; color:var(--mut); max-width:62ch; margin-bottom:16px}
.etk__govde > :last-child{margin-bottom:0}
/* Genişlik (--en) etkinlikler.php'de fotoğrafın oranından hesaplanır; her biçim aynı alanı kaplar:
   dikey 180×270, kare 220×220, yatay 16:9 293×165. Sabit 132 px'te yatay fotoğraf 132×74'lük bir şeride düşüyordu.
   24vw: dar ekranda yazıya yer kalsın. */
.etk .buyutulebilir.etk__foto{width:clamp(132px, 24vw, var(--en, 180px)); flex:none; border-radius:var(--r-sm); background:var(--card)}

.etk-gecmis{list-style:none; margin:0; padding:0}
.etk-gecmis__satir{display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:18px; align-items:center; padding:16px 4px; border-top:1px solid var(--line)}
.etk-gecmis__satir:first-child{border-top:0}
.etk-gecmis__tarih{font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--olive); white-space:nowrap}
.etk-gecmis__ad strong{display:block; font-family:var(--disp); font-weight:700; font-size:15.5px; text-transform:uppercase; line-height:1.25}
.etk-gecmis__ad span{display:block; font-size:13.5px; color:var(--mut); margin-top:3px}
.etk-gecmis .buyutulebilir.etk-gecmis__foto{width:64px; border-radius:8px}

/* Tür etiketi ("Söyleşi ve imza"), harita bağlantısı, düğme sırası (takvime ekle + paylaş) */
.etk__etiket, .etk-gecmis__etiket{font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--olive)}
.etk__etiket{display:inline-block; background:var(--card); border:1px solid var(--line); padding:5px 11px; border-radius:var(--pill); margin-bottom:10px}
.etk-gecmis__etiket{display:block; margin-bottom:3px}
.etk__harita{color:inherit; text-decoration:underline; text-decoration-color:var(--sage); text-underline-offset:3px}
.etk__harita:hover{color:var(--olive); text-decoration-color:currentColor}
.etk__harita-ek{font-size:12px; font-weight:600; color:var(--olive); white-space:nowrap; margin-left:4px}
/* Düğme sırası yazının altında, ikinci satırda; fotoğraf sağda iki satır boyunca durur */
.etk__eylem{grid-column:2; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:-6px}
.etk--fotolu .buyutulebilir.etk__foto{grid-column:3; grid-row:1 / span 2}
.etk__paylas{display:flex; gap:8px}
.etk .paylas__dg{background:var(--card)}
.etk .paylas__dg:hover{background:var(--olive)}
.etk-takvim{position:relative}
.etk-takvim > summary{list-style:none; user-select:none}
.etk-takvim > summary::-webkit-details-marker{display:none}
.etk-takvim[open] > summary{background:#EDEBE4}
.etk-takvim__menu{position:absolute; left:0; top:calc(100% + 8px); z-index:20; min-width:236px; padding:6px; display:grid; gap:2px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:0 14px 40px rgba(16,19,14,.16)}
.etk-takvim__menu a{display:block; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--ink)}
.etk-takvim__menu a:hover{background:var(--card-2); color:var(--ink)}
.etk-takvim__menu small{display:block; font-size:12px; font-weight:400; color:var(--mut); margin-top:1px}
/* Açılan pencereden ya da paylaşılan bağlantıdan gelindiğinde ilgili etkinlik belli olsun */
.etk:target{box-shadow:0 0 0 2px var(--olive)}
.etk-gecmis__satir{scroll-margin-top:100px}
.etk-gecmis__satir:target{background:var(--card-2); border-radius:var(--r-sm); box-shadow:0 0 0 2px var(--olive); padding-inline:14px}

@media(max-width:700px){
  /* TELEFON YERLEŞİMİ: üstte tarih kutusu + yanında etiket ve başlık; altında sırayla fotoğraf, tarih/saat/yer,
     açıklama, düğmeler — hepsi kartın TAM genişliğinde. (Eskiden bütün yazı tarih kutusunun yanındaki dar
     sütuna sıkışıyor, solunda boş bir şerit kalıyordu.)
     .etk__govde{display:contents}: içindekiler kartın doğrudan parçası gibi dizilir; sıra "order" ile verilir. */
  .etk, .etk--fotolu{grid-template-columns:auto minmax(0,1fr); grid-template-rows:none; gap:0 14px; padding:18px}
  .etk__govde{display:contents}
  .etk__tarih{width:62px; grid-column:1; grid-row:1 / span 2; align-self:start; padding:10px 4px 9px}
  .etk__gun{font-size:25px}
  .etk__etiket{grid-column:2; justify-self:start; align-self:start; order:1; margin-bottom:7px}
  .etk__govde h3{grid-column:2; align-self:start; order:2; margin-bottom:0; font-size:18px; line-height:1.22}
  /* Fotoğraf kartın tam genişliğinde; çok geniş telefonda dikey afiş 440 px'ten uzun olmasın */
  .etk .buyutulebilir.etk__foto, .etk--fotolu .buyutulebilir.etk__foto{grid-column:1 / -1; grid-row:auto; order:3; width:100%; max-width:min(100%, calc(440px * var(--oran, 1))); margin-top:16px}
  .etk__bilgi{grid-column:1 / -1; order:4; margin:16px 0 0; flex-direction:column; align-items:flex-start; gap:9px}
  .etk__yazi{grid-column:1 / -1; order:5; margin:12px 0 0; max-width:none}
  .etk__eylem{grid-column:1 / -1; order:6; margin-top:18px}
  /* Düğmeler: asıl bağlantı tam genişlikte tek satır; altında "Takvime ekle" + paylaş simgeleri yan yana */
  .etk__eylem > .btn{flex:1 1 100%; justify-content:center}
  .etk-takvim{flex:1 1 0; min-width:0}
  .etk-takvim > summary{width:100%; justify-content:center}
  .etk-gecmis__satir{grid-template-columns:minmax(0,1fr) auto; gap:6px 14px}
  .etk-gecmis__tarih{grid-column:1 / -1}
  /* Dar ekranda takvim menüsü kartın dışına taşmasın: açılınca kendi satırına iner */
  .etk-takvim[open]{flex:1 1 100%}
  .etk-takvim__menu{position:static; min-width:0; margin-top:8px; box-shadow:none}
}

/* ---------- üst menü: 8 başlık (Etkinlikler eklenince) ----------
   Ölçüldü: yazılar 460 px, 1061–1139 px arası menüye 590–634 px kalıyor;
   26 px aralıkla sığmayıp ikinci satıra taşıyordu. Yalnız bu aralıkta ve
   yalnız 8+ başlıkta aralık kısılır; 7 başlıklı menü değişmez. */
@media(min-width:1061px) and (max-width:1160px){ .nav--genis{gap:16px} }
.etk__tarih--bos .etk__ay{font-size:10px; letter-spacing:.06em}   /* "Duyuru" yazısı dar kutuya sığsın */

/* ---------- davet formu (davet.php) ---------- */
.form__bolum{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--olive);
  margin:10px 0 0; padding-top:18px; border-top:1px solid var(--line)}
.form__bolum:first-of-type{border-top:0; padding-top:0; margin-top:0}
.form .lbl small{font-weight:500; letter-spacing:.04em; text-transform:none; font-size:11px; color:var(--fai)}
.form__not{font-size:13px; line-height:1.6; color:var(--mut)}

/* ---------- basın ve organizatör kiti (basin-kiti.php) ---------- */
.bk-not{margin-top:16px; padding:14px 18px; border-radius:var(--r-sm); background:var(--card-2); border-left:3px solid var(--sage); font-size:14px; line-height:1.65; color:var(--mut)}
.bk-bio{margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
.bk-bio__bas{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px}
.bk-bio__bas h2{font-family:var(--disp); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:-.005em; margin-bottom:3px}
.bk-bio__bas span{font-size:12.5px; color:var(--fai)}
.bk-bio__metin{font-size:15.5px; line-height:1.75; color:var(--ink); max-width:68ch}
.bk-bio .mini[hidden]{display:none}
.bk-bilgi{display:block; min-height:1.2em; margin-top:10px; font-size:13px; color:var(--ok)}
.bk-izgara{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; align-items:start}
.bk-izgara--kapak{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.bk-foto{margin:0; background:var(--card-2); border-radius:var(--r-md); padding:12px 12px 16px}
.bk-foto .buyutulebilir{border-radius:var(--r-sm); background:var(--card)}
.bk-foto figcaption{display:grid; gap:4px; padding:12px 4px 0; font-size:13px; color:var(--mut)}
.bk-foto figcaption strong{font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--ink); text-transform:uppercase; line-height:1.3}
.bk-foto figcaption .btn{margin-top:8px; justify-self:start}
.bk-kapak{display:block; border-radius:var(--r-sm); overflow:hidden; background:var(--card)}
.bk-kapak img{display:block; width:100%; height:auto}

/* ---------- e-bülten kayıt kutusu ve sonuç sayfası (inc/bulten.php, bulten.php) ---------- */
.bulten{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(20px,4vw,56px); align-items:center}
.bulten .eyebrow{margin-bottom:14px}
.bulten__baslik{font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.6vw,30px); line-height:1.1; letter-spacing:-.015em; text-transform:uppercase; margin-bottom:12px}
.bulten__yazi p{font-size:14.5px; line-height:1.65; color:var(--mut); max-width:46ch}
.bulten__alan{display:grid; gap:12px}
.bulten__satir{display:flex; gap:8px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--pill); padding:6px; transition:border-color .2s, box-shadow .2s, background .2s}
.bulten__satir:focus-within{border-color:var(--sage); background:#fff; box-shadow:0 0 0 4px rgba(169,179,148,.22)}
.bulten__satir input{flex:1; min-width:0; height:46px; padding:0 16px; border:0; background:transparent; outline:none; font:16px/1.4 var(--body); color:var(--ink)}
.bulten__satir input::placeholder{color:var(--fai)}
.bulten__satir .btn{flex:none; padding-block:0; height:46px}
.bulten__satir .btn:hover{transform:none}
.bulten__onay{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--mut); cursor:pointer; padding:0 8px}
.bulten__onay input{flex:none; width:20px; height:20px; margin:0; accent-color:var(--olive); cursor:pointer}
.bulten :focus-visible{outline:2px solid var(--olive); outline-offset:2px}
.bulten__satir input:focus-visible{outline:none}
.bulten-sonuc{max-width:60ch; margin-inline:auto; text-align:center; padding-block:clamp(10px,3vw,34px)}
.bulten-sonuc .lede{margin:16px auto 0}
.bulten-sonuc__not{font-size:14px; line-height:1.65; color:var(--mut); margin:14px auto 0}
.bulten-sonuc .btn, .bulten-sonuc form{margin-top:26px}
.bulten-sonuc form .btn{margin-top:0}
@media(max-width:820px){
  .bulten{grid-template-columns:1fr}
}
@media(max-width:440px){
  .bulten__satir{flex-direction:column; border-radius:var(--r-md); padding:8px}
  /* Alt alta dizilimde "flex:1" kutunun yüksekliğini sıfırlıyordu (20 px'e düşüyordu) */
  .bulten__satir input{flex:none; width:100%}
  .bulten__satir .btn{width:100%}
}