/*
Theme Name: İMEDU
Theme URI: https://imedu.mavipiksel.com
Author: Mavi Piksel
Description: İzmir Modern Anaokulu için özel tema. Tasarım bu temada sabittir; sayfa içerikleri Elementor ile düzenlenir. Üst bar, alt bölüm ve blog şablonları tema tarafından basılır.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Tescilli
Text Domain: imedu
Tags: education, custom-colors, elementor
*/

/* ============================================================
   Bu dosyanın gövdesi, PHP sürümündeki assets/css/style.css ile
   BİREBİR aynıdır. Sonundaki "WordPress + Elementor uyarlaması"
   bölümü yalnızca WordPress'e özgü eklemeleri içerir; özgün
   kurallara dokunulmaz, böylece iki sürüm ayrı ayrı sürdürülebilir.
   ============================================================ */

/* ============================================================
   İMEDU Anaokulu — The Living School
   Ana sayfa stil dosyası
   ============================================================ */

/* ---------- 1. Tasarım değişkenleri ---------- */
:root{
  /* Renkler — imedu-logo.png'den alindi.
     #55351E logodaki "im" kahvesi, #4E2A1A yazi kahvesi,
     #5B632C yaprak zeytin yesili. Notrler bu sicak kahveye
     calacak sekilde secildi; onceki soguk mavi notrler birakildi. */
  --brand:        #55351E;   /* ana kahve — butonlar, koyu bant */
  --brand-deep:   #3B2413;   /* hover, en koyu ton */
  --brand-mid:    #6B4A31;   /* ara kahve */
  --brand-soft:   #9A7B62;   /* ikon cizgileri */
  --brand-label:  #8C7259;   /* eyebrow etiketleri */
  --accent:       #5B632C;   /* logodaki yaprak yesili — vurgu */
  --accent-soft:  #77803D;   /* yesilin acik tonu */
  --accent-lite:  #A9B45F;   /* koyu zeminde okunan yesil */

  --shell:        #F7F3ED;   /* ana zemin — sicak krem */
  --paper:        #FFFFFF;   /* acik bolum zemini */
  --tint:         #EFE7DB;   /* kart dolgusu */
  --tint-2:       #F9F5F0;

  --line:         #E4DACB;   /* sac teli cizgiler */
  --line-strong:  #C9B9A4;

  --ink:          #2A1B10;   /* ana metin */
  --ink-2:        #4A3524;
  --muted:        #806A56;   /* aciklama metni */
  --on-dark:      #F6F0E8;
  --on-dark-mut:  #C8B49E;

  /* Tipografi */
  --serif: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --script:"Cormorant Garamond", "EB Garamond", Georgia, serif;

  /* Ölçü */
  --maxw: 1320px;
  --gut:  clamp(20px, 4vw, 48px);
  --hdr-h: 88px;
  --r: 3px;                  /* köşe yarıçapı — maket keskin kenarlı */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Temel ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 24px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font:400 1.06rem/1.65 var(--sans);
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
sup{ font-size:.5em; vertical-align:super; line-height:0; }
hr{ border:0; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

.skip{
  position:fixed; left:16px; top:-100px; z-index:200;
  background:var(--brand); color:var(--on-dark);
  padding:10px 18px; border-radius:999px; font-size:1rem;
  transition:top .2s var(--ease);
}
.skip:focus{ top:16px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Yalnızca ekran okuyucuya görünen metin */
.u-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; white-space:nowrap; border:0; clip-path:inset(50%);
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- 3. İkonlar ---------- */
.ico{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--lg{ width:30px; height:30px; stroke-width:1.35; }

/* ---------- 4. Tipografi yardımcıları ---------- */
.eyebrow{
  font-size:.87rem; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--brand-label);
  margin-bottom:18px;
}
.h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.1rem, 3.5vw, 3.1rem);
  line-height:1.14; letter-spacing:-.005em; color:var(--ink);
}
.lede{
  margin-top:18px; max-width:46ch;
  font-size:1.12rem; line-height:1.75; color:var(--muted);
}
.lede--wide{ max-width:52ch; margin-top:12px; }
.rule{ width:44px; height:2px; background:var(--accent); margin:26px 0; }

/* ---------- 5. Butonlar & bağlantılar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font:500 1rem/1 var(--sans); letter-spacing:.005em;
  cursor:pointer; white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--solid{ background:var(--brand); color:var(--on-dark); }
.btn--solid:hover{ background:var(--brand-deep); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--brand); background:rgba(85,53,30,.07); transform:translateY(-1px); }
.btn--sm{ padding:12px 24px; font-size:.95rem; }
.btn--full{ width:100%; }
.btn .ico{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover .ico:not(.ico--play){ transform:translateX(3px); }

.link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:1rem; font-weight:500; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover{ color:var(--brand); border-bottom-color:var(--brand); }
.link .ico{ width:16px; height:16px; transition:transform .25s var(--ease); }
.link:hover .ico{ transform:translateX(3px); }

/* ---------- 6. Görseller ----------
   Fotograf yuklenene kadar (veya dosya eksikse) logonun kahvesine
   calan degrade zemin gorunur; boylece yerlesim hicbir durumda bozulmaz.
   Farkli kaynaklardan gelen fotograflari tek bir gorsel dile oturtmak
   icin hafif bir isitma/doygunluk ayari uygulanir. */
.media{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:linear-gradient(155deg, var(--ph1,#E6DCCE) 0%, var(--ph2,#B9A48A) 100%);
}
.media::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 85% at 26% 12%, rgba(255,255,255,.34), transparent 62%);
}
.media > img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  object-position:50% 42%;   /* yüzler genelde üst yarıda — kırpma oraya öncelik verir */
  filter:saturate(.94) contrast(1.03) brightness(1.01) sepia(.07);
}
.hero__media > img{ object-position:50% 46%; }
/* Atölye kartlarının alt yarısını koyu degrade kapatıyor: odağı yukarı al */
.studio > img{ object-position:50% 58%; }
.media--1{ --ph1:#E8DED0; --ph2:#BCA88E; }
.media--2{ --ph1:#E5DACB; --ph2:#B8A388; }
.media--3{ --ph1:#E1D5C4; --ph2:#B29C80; }
.media--4{ --ph1:#E7DDCF; --ph2:#BAA68C; }
.media--5{ --ph1:#DED2C0; --ph2:#AC9578; }
.media--6{ --ph1:#DACDB9; --ph2:#A68D6F; }
.media--7{ --ph1:#E3D8C8; --ph2:#B5A084; }
.media--8{ --ph1:#DCD0BD; --ph2:#A99177; }
.media--9{ --ph1:#DFD3C1; --ph2:#AE9779; }
.media--10{ --ph1:#E6DBCC; --ph2:#B7A286; }

/* ---------- 7. Üst bar ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--shell);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck{
  background:rgba(247,243,237,.9);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  min-height:var(--hdr-h);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}

.logo{ display:flex; align-items:center; flex:none; }
.logo__img{
  width:auto; height:clamp(38px,4.4vw,50px);
  object-fit:contain;
}
.logo--sm .logo__img{ height:42px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-inline:auto; }
.nav a{
  position:relative; font-size:1.01rem; color:var(--ink-2);
  padding:6px 0; transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--brand); }
.nav a:hover::after,
.nav a.is-current::after{ transform:scaleX(1); }
.nav a.is-current{ color:var(--ink); }

.hdr__cta{ flex:none; }

.burger{
  display:none; flex:none; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; margin-left:auto;
  background:transparent; border:1px solid var(--line-strong);
  border-radius:999px; color:var(--ink); cursor:pointer;
}
.burger .ico{ width:20px; height:20px; }

/* ---------- 8. Hero ---------- */
/* Tam genisliklu banner (Enfant temasindaki gibi): fotograf bolumun
   tamamini kaplar, metin fotografin uzerinde .wrap hizasinda durur.
   Okunabilirlik soldan saga acilan koyu bir perdeyle saglanir. */
.hero{
  position:relative;
  display:grid; align-items:center;
  min-height:clamp(500px, 64vh, 760px);
  background:var(--brand-deep);
  overflow:hidden;
}
.hero__copy{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
  padding-block:clamp(64px,8vw,112px);
  color:var(--on-dark);
}
.hero__copy > *{ max-width:min(660px, 58%); }
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(3.2rem, 7vw, 6rem);
  line-height:.96; letter-spacing:.004em;
  text-transform:uppercase; color:var(--on-dark);
  text-shadow:0 2px 26px rgba(28,16,8,.42);
}
.hero__lead{
  margin-top:clamp(18px,2vw,28px);
  font-size:clamp(1.14rem, 1.5vw, 1.42rem);
  line-height:1.52; color:var(--on-dark);
}
.hero__note{ font-size:1.08rem; line-height:1.7; color:var(--on-dark-mut); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero__media{
  position:absolute; inset:0; z-index:0;
  margin:0; border-radius:0;
}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg,
    rgba(28,16,8,.90) 0%, rgba(28,16,8,.74) 32%,
    rgba(28,16,8,.40) 60%, rgba(28,16,8,.14) 100%);
}
/* Hero icindeki cerceveli buton koyu zeminde acik durur */
.hero .btn--ghost{ color:var(--on-dark); border-color:rgba(246,240,232,.5); }
.hero .btn--ghost:hover{ background:rgba(246,240,232,.12); border-color:var(--on-dark); }
.hero .rule{ background:var(--accent-lite); }
/* Maketteki "Bugünün Sorusu" kara tahtası */
.hero__badge{
  position:absolute; right:clamp(16px,3vw,42px); bottom:clamp(18px,4vw,54px); z-index:4;
  width:clamp(108px,11vw,142px); aspect-ratio:1/.86;
  background:var(--brand-deep); border-radius:var(--r);
  border:3px solid var(--brand-mid);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--on-dark); text-align:center;
  transform:rotate(-2.5deg);
  box-shadow:0 14px 32px rgba(42,27,16,.34);
}
.hero__badge-txt{ font-family:var(--script); font-style:italic; font-size:1.04rem; line-height:1.25; }
.hero__badge-q{
  font-family:var(--script); font-style:italic; font-size:1.62rem;
  line-height:1; margin-top:2px; color:var(--accent-lite);
}

/* ---------- 9. Özellik şeridi ---------- */
.strip{ background:var(--shell); padding-block:clamp(28px,4vw,50px) clamp(44px,6vw,78px); }
.strip__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
.feat{ display:flex; gap:14px; align-items:flex-start; }
.feat__ico{
  flex:none; width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line-strong);
  display:grid; place-items:center; color:var(--brand-soft);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.feat:hover .feat__ico{ border-color:var(--brand); color:var(--brand); }
.feat__t{ font-family:var(--sans); font-size:1.06rem; font-weight:500; color:var(--ink); }
.feat__d{ margin-top:6px; font-size:.97rem; line-height:1.6; color:var(--muted); }

/* ---------- 10. Bölümler ---------- */
.sec{ padding-block:clamp(52px,7vw,104px); background:var(--paper); }
.sec--alt{ background:var(--shell); }
.sec--top{ padding-top:clamp(38px,5vw,68px); }

.sec__head{ margin-bottom:clamp(28px,3.4vw,48px); }
.sec__sub{
  margin-top:12px; font-family:var(--sans); font-weight:500;
  font-size:1.06rem; letter-spacing:.005em; color:var(--brand-mid);
}
.sec__note{ margin-top:22px; font-size:1.02rem; line-height:1.7; color:var(--ink-2); }

/* Uzun metin blokları — Yaşamımız, bölüm girişleri, blog yazısı */
.prose{ max-width:74ch; }
.prose--tight{ max-width:70ch; margin-top:clamp(26px,3vw,42px); }
.prose__t{ margin-top:4px; }
.prose__body{ margin-top:22px; }
.prose__body p{ font-size:1.07rem; line-height:1.78; color:var(--ink-2); }
.prose__body p + p{ margin-top:18px; }
.prose__body h3{
  margin-top:32px; font-family:var(--serif); font-weight:600;
  font-size:1.3rem; line-height:1.3; color:var(--ink);
}
.prose__body h3 + p{ margin-top:10px; }
.prose__body--sm{ margin-top:18px; max-width:64ch; }
.prose__body--sm p{ font-size:1.01rem; line-height:1.72; color:var(--muted); }
.prose .link{ margin-top:28px; }
.quote--mid{ margin-top:32px; text-align:left; }
.hint--page{ font-size:1.06rem; line-height:1.7; color:var(--muted); }

/* ---------- 11. The Living Child Model ---------- */
.keys{
  margin-top:26px; font-family:var(--sans); font-weight:500;
  font-size:.95rem; letter-spacing:.15em; color:var(--brand-soft);
}
.pillars{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.pillar{
  background:var(--tint);
  padding:clamp(24px,2.2vw,34px) clamp(20px,1.9vw,30px);
  display:flex; flex-direction:column; align-items:flex-start; text-align:start; gap:9px;
  transition:background-color .3s var(--ease);
}
.pillar:hover{ background:#E7DCCB; }
.pillar .ico{ color:var(--brand-soft); }
.pillar h3{
  font-family:var(--serif); font-weight:500;
  font-size:1.3rem; letter-spacing:.03em; color:var(--ink);
}
.pillar__tag{
  font-family:var(--sans); font-size:.89rem;
  letter-spacing:.07em; color:var(--brand-soft);
}
.pillar__body{ margin-top:3px; }
.pillar__body p{ font-size:.96rem; line-height:1.62; color:var(--muted); }
.pillar__body p + p{ margin-top:10px; }

/* ---------- 12. İM’de Bir Gün ---------- */
.day{ columns:2; column-gap:clamp(30px,3.6vw,64px); }
.day__item{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  padding:16px 0 17px clamp(16px,1.5vw,24px);
  border-bottom:1px solid var(--line);
  border-inline-start:2px solid var(--tint);
  transition:border-color .3s var(--ease);
}
.day__item:hover{ border-inline-start-color:var(--accent); }
.day__time{
  display:flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.85rem;
  letter-spacing:.06em; color:var(--brand-soft);
}
.day__time .ico{ width:15px; height:15px; }
.day__t{
  margin-top:8px; font-family:var(--serif); font-weight:500;
  font-size:1.16rem; line-height:1.25; letter-spacing:.03em; color:var(--ink);
}
.day__d{ margin-top:5px; font-size:.95rem; line-height:1.6; color:var(--muted); }

/* ---------- 13. Fotoğraf üstü kart yazısı ----------
   Foundation ve Sınıflarımız kartlarında ad ve slogan fotoğrafın sol
   üstünde durur. Fotoğrafların üst kenarı her karede aynı tonda
   olmadığı için üstten aşağı sönümlenen krem bir perde konur. */
.cap{
  position:absolute; inset:0 0 auto 0; z-index:3;
  padding:clamp(15px,1.5vw,21px) clamp(15px,1.5vw,21px) clamp(34px,3.4vw,50px);
  background:linear-gradient(to bottom,
    rgba(247,243,237,.98) 0%, rgba(247,243,237,.96) 46%,
    rgba(247,243,237,.90) 68%, rgba(247,243,237,.60) 83%,
    rgba(247,243,237,0) 100%);
}
.cap__t{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.1rem,1.3vw,1.3rem); line-height:1.2;
  letter-spacing:.01em; color:var(--ink);
}
.cap__d{ margin-top:5px; font-size:.9rem; line-height:1.45; color:var(--muted); }

/* ---------- 14. Foundation kartları ---------- */
.progs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.prog{
  display:flex; flex-direction:column;
  background:var(--tint-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.prog:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.prog .media{ aspect-ratio:3/4; max-height:520px; border-radius:0; }
.prog .media > img{ transition:transform .6s var(--ease); }
.prog:hover .media > img{ transform:scale(1.045); }
.prog__body{ padding:clamp(18px,1.7vw,26px) clamp(18px,1.7vw,26px) clamp(24px,2.1vw,32px); }
.prog__body p{ font-size:.99rem; line-height:1.7; color:var(--muted); }
.prog__body p + p{ margin-top:12px; }

/* ---------- 15. Sınıflarımız ---------- */
.studios{ background:var(--paper); }
.studios__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,3vw,42px);
}
.studios__head > div{ margin-bottom:0; }
/* Şelale (masonry) yerleşim. Kaynak fotoğraflar 600x600 olduğu için iki
   sütun (kart ~600 px) fotoğrafı büyütmeden verilebilecek en geniş
   ölçü. Kartlara sırayla farklı en-boy oranı verilir; sütunlar bu
   sayede kayarak akar. Sondaki boşluk için ızgaraya negatif alt boşluk. */
.studios__grid{
  --sgap:clamp(12px,1.4vw,20px);
  columns:2; column-gap:var(--sgap);
  margin-bottom:calc(var(--sgap) * -1);
}
.studio{
  break-inside:avoid; margin-bottom:var(--sgap);
  aspect-ratio:1/1;
}
.studio:nth-child(5n+1){ aspect-ratio:1/0.80; }
.studio:nth-child(5n+2){ aspect-ratio:1/0.76; }
.studio:nth-child(5n+3){ aspect-ratio:1/0.80; }
.studio:nth-child(5n+4){ aspect-ratio:1/1.16; }
.studio:nth-child(5n+5){ aspect-ratio:1/1.16; }
.studio > img{ transition:transform .7s var(--ease); }
.studio:hover > img{ transform:scale(1.06); }

/* Kartın tamamı büyütme düğmesi; sağ altta küçük bir büyüteç rozeti
   yalnızca imleç üstündeyken (veya klavye odağında) belirir. */
.studio__zoom{
  position:absolute; inset:0; z-index:4;
  width:100%; padding:0; border:0; background:none;
  appearance:none; cursor:zoom-in;
}
.studio__zoom-ico{
  position:absolute; right:clamp(12px,1.2vw,18px); bottom:clamp(12px,1.2vw,18px);
  width:46px; height:46px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(247,243,237,.94); color:var(--brand);
  box-shadow:0 3px 16px rgba(42,27,16,.18);
  opacity:0; transform:translateY(7px) scale(.94);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.studio:hover .studio__zoom-ico,
.studio__zoom:focus-visible .studio__zoom-ico{ opacity:1; transform:none; }
@media (hover: none){
  .studio__zoom-ico{ opacity:1; transform:none; }
}

/* ---------- 16. Blog kartları ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,32px); }
.post{ display:flex; }
.post__link{
  display:flex; flex-direction:column; width:100%;
  background:var(--tint-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.post__link:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.post__media{ aspect-ratio:4/3; border-radius:0; }
.post__media > img{ transition:transform .6s var(--ease); }
.post__link:hover .post__media > img{ transform:scale(1.045); }
.post__txt{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px) clamp(18px,1.8vw,24px);
}
.post__date{
  margin:0;
  font-family:var(--sans); font-size:.84rem;
  letter-spacing:.07em; color:var(--brand-soft);
}
.post__t{
  margin:9px 0 0;
  font-family:var(--serif); font-weight:500;
  font-size:1.24rem; line-height:1.26; color:var(--ink);
  transition:color .25s var(--ease);
}
.post__d{ margin:9px 0 0; font-size:.96rem; line-height:1.62; color:var(--muted); }
.post__go{
  display:inline-flex; align-items:center; gap:9px;
  margin:auto 0 0;
  padding-top:18px;
  font-family:var(--sans); font-size:.93rem; font-weight:500; color:var(--brand);
}
.post__go .ico{ width:16px; height:16px; transition:transform .25s var(--ease); }
.post__link:hover .post__go .ico{ transform:translateX(3px); }

.post__hero{ aspect-ratio:16/9; margin-top:clamp(26px,3vw,40px); }

/* Akan liste — ana sayfanın blog bölümü.
   Kart ızgarası yerine ince çizgilerle ayrılmış, aşağı doğru okunan
   satırlar. blog.php arşiv görünümünde kart ızgarası olarak kalır. */
.posts--flow{ display:block; }
.posts--flow .post{ display:block; border-top:1px solid var(--line); }
.posts--flow .post:last-child{ border-bottom:1px solid var(--line); }
.posts--flow .post__link{
  display:grid; grid-template-columns:clamp(190px,23vw,310px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,46px); align-items:center;
  padding:clamp(20px,2.4vw,34px) 0;
  background:none; border:0; border-radius:0;
}
.posts--flow .post__link:hover{ transform:none; }
.posts--flow .post__link:hover .post__t{ color:var(--brand); }
.posts--flow .post__media{ aspect-ratio:4/3; border-radius:var(--r); }
.posts--flow .post__txt{ padding:0; flex:none; }
.posts--flow .post__t{ margin-top:7px; font-size:clamp(1.3rem,1.85vw,1.7rem); }
.posts--flow .post__d{ margin-top:11px; max-width:64ch; font-size:1rem; }
.posts--flow .post__go{ margin:16px 0 0; padding-top:0; }

.pager{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,2.2vw,32px); flex-wrap:wrap;
  margin-top:clamp(32px,3.6vw,52px);
}
.pager__a{
  font-family:var(--sans); font-size:.98rem; font-weight:500; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.pager__a:hover{ color:var(--brand); border-bottom-color:var(--brand); }
.pager__n{ font-size:.94rem; color:var(--muted); }

/* ---------- 17. Koyu değerler bandı ---------- */
.band{ background:var(--brand); color:var(--on-dark); padding-block:clamp(38px,4.5vw,58px); }
.band__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.value{
  display:flex; gap:16px; align-items:flex-start;
  padding-inline:clamp(16px,2.2vw,34px);
}
.value:first-child{ padding-inline-start:0; }
.value:last-child{ padding-inline-end:0; }
.value + .value{ border-inline-start:1px solid rgba(246,240,232,.22); }
.value__ico{
  flex:none; width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(246,240,232,.42);
  display:grid; place-items:center; color:var(--on-dark);
}
.value__ico .ico{ width:22px; height:22px; }
.value h3{ font-family:var(--serif); font-weight:500; font-size:1.25rem; line-height:1.24; }
.value p{ margin-top:8px; font-size:.96rem; line-height:1.6; color:var(--on-dark-mut); }

/* ---------- 18. Alt bölüm ---------- */
.foot{ background:var(--shell); }
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,.86fr);
  gap:clamp(28px,3.6vw,64px);
  padding-block:clamp(48px,6vw,84px);
  align-items:start;
}

.panel{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px 24px;
}
.panel__t{ font-family:var(--serif); font-weight:500; font-size:1.34rem; color:var(--ink); }
.checks{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.checks li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; line-height:1.54; color:var(--muted); }
.checks .ico{ color:var(--brand-soft); margin-top:2px; }
.checks b{ font-weight:500; color:var(--ink-2); }
.panel .link{ margin-top:20px; }

.closing{ text-align:center; padding-top:6px; }
.closing__t{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,2.7vw,2.35rem); line-height:1.2; color:var(--ink);
}
.closing__p{
  margin:16px auto 0; max-width:44ch;
  font-size:1.03rem; line-height:1.74; color:var(--muted);
}
.quote{
  margin:22px 0 0;
  font-family:var(--script); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.34;
  color:var(--brand-deep);
}

.contact__t{ font-family:var(--serif); font-weight:500; font-size:1.34rem; color:var(--ink); }
.contact__list{ display:flex; flex-direction:column; gap:13px; margin-top:18px; }
.contact__list li{ display:flex; gap:12px; align-items:center; font-size:1.01rem; color:var(--ink-2); }
.contact__list .ico{ color:var(--brand-soft); }
.contact__list a{ border-bottom:1px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease); }
.contact__list a:hover{ color:var(--brand); border-bottom-color:var(--brand); }
.contact .btn{ margin-top:24px; }

.foot__bar{ background:var(--paper); border-top:1px solid var(--line); }
.foot__bar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,40px); flex-wrap:wrap;
  padding-block:20px;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:clamp(12px,1.8vw,26px); }
.foot__nav a{ font-size:.97rem; color:var(--muted); transition:color .2s var(--ease); }
.foot__nav a:hover{ color:var(--brand); }

.social{ display:flex; gap:8px; }
.social a{
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; color:var(--muted);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.social a:hover{ background:var(--tint); color:var(--brand); }

.copy{ font-size:.88rem; color:var(--muted); padding-bottom:22px; }

/* ---------- 19. Video katmanı ---------- */
.modal{
  width:min(920px, 92vw); padding:0; border:0; border-radius:6px;
  background:var(--brand-deep); color:var(--on-dark); overflow:visible;
}
.modal::backdrop{ background:rgba(35,21,11,.78); backdrop-filter:blur(3px); }
.modal__x{
  position:absolute; top:-14px; right:-14px;
  width:40px; height:40px; border-radius:999px; padding:0;
  background:var(--on-dark); color:var(--brand-deep);
  border:0; cursor:pointer; display:grid; place-items:center;
}
.modal__frame{ aspect-ratio:16/9; display:grid; place-items:center; }
.modal__hint{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:1.02rem; color:var(--on-dark-mut);
}

/* Fotoğraf katmanı (lightbox) — sınıf kartları buraya açılır */
.lbox{
  /* Pencere fotoğrafın kendi ölçüsüne oturur: kaynak büyütülmediği için
     görüntü net kalır, altındaki başlık şeridi de fotoğrafla aynı
     genişlikte olur. Panelden daha büyük bir fotoğraf yüklenirse
     katman kendiliğinden büyür (üst sınır: 1100 px / 96vw). */
  width:max-content; max-width:min(1100px, 96vw); max-height:94dvh;
  padding:0; border:0; border-radius:6px;
  background:var(--brand-deep); color:var(--on-dark); overflow:visible;
}
.lbox::backdrop{ background:rgba(35,21,11,.86); backdrop-filter:blur(4px); }
.lbox__fig{ margin:0; display:grid; grid-template-columns:max-content; }
.lbox__frame{
  display:grid; place-items:center; overflow:hidden;
  background:rgba(0,0,0,.26); border-radius:6px 6px 0 0;
}
.lbox__img{
  display:block; width:auto; height:auto;
  max-width:min(1100px, 96vw); max-height:min(74dvh, 760px);
}
/* Başlık şeridi sütun genişliğini belirlemesin — uzun bir slogan
   pencereyi fotoğraftan geniş yapmamalı. */
.lbox__cap{ width:0; min-width:100%; }
.lbox__cap{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding:clamp(15px,1.7vw,23px) clamp(18px,2vw,28px);
}
.lbox__t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.14rem,1.5vw,1.4rem); }
.lbox__d{ margin-top:5px; font-size:.97rem; line-height:1.55; color:var(--on-dark-mut); }
.lbox__no{
  flex:none; font-family:var(--sans); font-size:.86rem;
  letter-spacing:.08em; color:var(--on-dark-mut);
}
.lbox__x{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:40px; height:40px; border-radius:999px; padding:0;
  background:var(--on-dark); color:var(--brand-deep);
  border:0; cursor:pointer; display:grid; place-items:center;
}
.lbox__nav{
  position:absolute; top:calc(50% - 48px); z-index:2;
  width:48px; height:48px; border-radius:999px; padding:0;
  background:rgba(247,243,237,.9); color:var(--brand-deep);
  border:0; cursor:pointer; display:grid; place-items:center;
  transition:background .25s var(--ease);
}
.lbox__nav:hover{ background:var(--on-dark); }
.lbox__nav--prev{ left:clamp(10px,1.4vw,20px); transform:rotate(180deg); }
.lbox__nav--next{ right:clamp(10px,1.4vw,20px); }
/* Geniş ekranda oklar fotoğrafın dışına çıkar; dar ekranda üstünde durur. */
@media (min-width: 1280px){
  .lbox__nav--prev{ left:-66px; }
  .lbox__nav--next{ right:-66px; }
}

/* ---------- 20. Görünürlük animasyonu ----------
   .is-hidden yalnızca ilk ekranın altında kalan bloklara JS ile
   eklenir; sayfa ilk karede tamamen okunur durumdadır. */
[data-reveal].is-hidden{ opacity:0; transform:translateY(16px); }
[data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  [data-reveal].is-hidden{ opacity:1; transform:none; }
}

/* ---------- 21. Sayfa modülleri ----------
   Panelden eklenen modüller sitenin mevcut düzenlerini olduğu gibi
   kullanır (.prose, .pillars, .progs, .day, .studios__grid, .quote).
   Burada yalnızca onlara özgü olan parçalar tanımlanır. */

/* Sayfa basligi bolumu: altindaki ilk modul kendi ust bosluguyla gelir */
.sec--flush{ padding-bottom:0; }

/* Taslak sayfa uyarisi - yalnizca oturum acikken gorunur */
.draft-bar{
  background:var(--accent); color:var(--on-dark);
  text-align:center; padding:11px 18px;
  font-family:var(--sans); font-size:.93rem; letter-spacing:.02em;
}

/* Kutu ve kart ızgaralarında sütun sayısı panelden seçilir. Duyarlı
   kurallar bu sınıflardan sonra geldiği için dar ekranda onlar kazanır. */
.pillars--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pillars--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.progs--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.progs--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Görsel + metin */
.mtxt{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px); align-items:center;
}
.mtxt__media{ aspect-ratio:4/3; }
/* Fotoğraf sağa alınırken kaynak sırası değişmez — ekran okuyucu ve
   klavye için metin önce gelmeye devam eder. */
.mtxt--right .mtxt__media{ order:2; }
.mtxt__txt .prose__body{ max-width:52ch; }
.mtxt__txt .link{ margin-top:26px; }

/* Alıntı */
.quote--solo{ margin-top:0; }
.quote__by{
  margin-top:14px; font-family:var(--sans); font-size:.9rem;
  letter-spacing:.06em; color:var(--brand-soft);
}

/* Çağrı bandı — değerler bandıyla aynı koyu zemin */
.cta__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,48px); flex-wrap:wrap;
}
.cta__t{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.2;
}
.cta__d{
  margin-top:10px; max-width:56ch;
  font-size:1rem; line-height:1.65; color:var(--on-dark-mut);
}
.cta__btn{ flex:none; background:var(--on-dark); color:var(--brand-deep); }
.cta__btn:hover{ background:#FFFFFF; transform:translateY(-1px); }

/* Sık sorulanlar — <details> ile, JavaScript gerekmez */
.faq{ max-width:80ch; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:19px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.08rem,1.4vw,1.24rem); line-height:1.35; color:var(--ink);
  transition:color .25s var(--ease);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__q:hover{ color:var(--brand); }
.faq__ico{
  flex:none; color:var(--brand-soft);
  transform:rotate(90deg); transition:transform .3s var(--ease);
}
.faq__item[open] .faq__ico{ transform:rotate(-90deg); }
.faq__a{ padding:0 0 22px; max-width:70ch; }
.faq__a p{ font-size:1rem; line-height:1.7; color:var(--muted); }
.faq__a p + p{ margin-top:12px; }

/* ---------- 22. Duyarlı yerleşim ---------- */
@media (max-width: 1180px){
  .strip__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; }
  .foot__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .closing{ grid-column:1 / -1; order:-1; }
}

@media (max-width: 1080px){
  .nav{
    position:fixed; left:0; right:0; top:var(--hdr-h);
    display:none; flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:4px var(--gut) 22px;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 22px 40px rgba(42,27,16,.14);
    max-height:calc(100dvh - var(--hdr-h)); overflow-y:auto;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1.04rem; }
  .nav a::after{ display:none; }
  .burger{ display:inline-flex; }
  .hdr__cta{ margin-left:auto; }
  .hdr__in{ gap:12px; }
}

@media (max-width: 900px){
  .hero{ min-height:clamp(440px,78vw,600px); }
  .hero__copy{ padding-block:clamp(56px,13vw,88px); }
  .hero__copy > *{ max-width:none; }
  .hero__media::after{
    background:linear-gradient(to top,
      rgba(28,16,8,.88) 0%, rgba(28,16,8,.70) 46%, rgba(28,16,8,.44) 100%);
  }
  .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .progs{ grid-template-columns:1fr; }
  .prog .media{ max-height:440px; }
  .day{ columns:1; }
  .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .posts--flow .post__link{ grid-template-columns:clamp(160px,26vw,240px) minmax(0,1fr); }
  .mtxt{ grid-template-columns:1fr; gap:clamp(20px,4vw,32px); }
  .mtxt--right .mtxt__media{ order:0; }
  .band__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 0; }
  .value{ padding-inline:clamp(14px,3vw,28px); }
  .value:nth-child(odd){ padding-inline-start:0; }
  .value:nth-child(even){ padding-inline-end:0; }
  .value:nth-child(3){ border-inline-start:0; }
  .foot__bar-in{ justify-content:center; text-align:center; }
  .foot__nav{ justify-content:center; }
  .copy{ text-align:center; }
}

@media (max-width: 680px){
  :root{ --hdr-h:74px; }
  .posts{ grid-template-columns:1fr; }
  .posts--flow .post__link{ grid-template-columns:1fr; gap:clamp(14px,3vw,20px); align-items:start; }
  .posts--flow .post__media{ aspect-ratio:16/10; }
  .lbox__cap{ flex-direction:column; align-items:flex-start; gap:9px; }
  .lbox__nav{ width:42px; height:42px; }
  /* Dar ekranda pencere neredeyse tam genişlikte: kapat düğmesi
     dışarı taşmasın, fotoğrafın sağ üstüne otursun. */
  .lbox__x{ top:10px; right:10px; }
  .foot__grid{ grid-template-columns:1fr; }
  .cta__in{ flex-direction:column; align-items:flex-start; }
  .cta__btn{ width:100%; }
  .hero__actions .btn{ flex:1 1 auto; }
  /* Dar ekranda maketteki dekoratif satır sonları metni bölmesin */
  .hero__lead br, .hero__note br, .h2 br,
  .value h3 br, .closing__t br{ display:none; }
}

@media (max-width: 460px){
  .strip__grid{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .studios__grid{ columns:1; }
  .studio, .studio:nth-child(5n+1), .studio:nth-child(5n+2),
  .studio:nth-child(5n+3), .studio:nth-child(5n+4),
  .studio:nth-child(5n+5){ aspect-ratio:1/1; }
  .band__grid{ grid-template-columns:1fr; }
  .value{ padding-inline:0; }
  .value + .value{ border-inline-start:0; border-top:1px solid rgba(246,240,232,.22); padding-top:26px; }
  .hero__badge{ display:none; }
}