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

/* ---------- 1. Tasarım değişkenleri ---------- */
:root{
  /* Renkler — Enfant "Primary School" demosunun koyu mavisi esas alındı.
     #002749 ve #FF4E31 doğrudan temanın kendi paletinden gelir.
     Nötrler maviye çalacak şekilde seçildi; sıcak kremler kullanılmadı. */
  --navy:        #002749;   /* ana koyu mavi — butonlar, koyu bant */
  --navy-deep:   #001B33;   /* hover, en koyu ton */
  --navy-mid:    #2B455B;   /* ara mavi (Enfant) */
  --navy-soft:   #5E7C97;   /* ikon çizgileri */
  --navy-label:  #6C8399;   /* eyebrow etiketleri */
  --accent:      #FF4E31;   /* Enfant mercanı — yalnızca birkaç noktada */

  --shell:        #F1F4F7;   /* ana zemin */
  --paper:        #FFFFFF;   /* açık bölüm zemini */
  --tint:         #E7EEF3;   /* kart dolgusu */
  --tint-2:       #F4F7FA;

  --line:         #DBE3EA;   /* saç teli çizgiler */
  --line-strong:  #BFCEDA;

  --ink:          #0D1F2E;   /* ana metin */
  --ink-2:        #2A3E4E;
  --muted:        #64798A;   /* açıklama metni */
  --on-dark:      #EEF3F7;
  --on-dark-mut:  #A6BCCD;

  /* 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: 78px;
  --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 1rem/1.6 var(--sans);
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ 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(--navy); outline-offset:3px; border-radius:2px; }

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

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

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

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

/* ---------- 4. Tipografi yardımcıları ---------- */
.eyebrow{
  font-size:.71rem; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--navy-label);
  margin-bottom:18px;
}
.h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.85rem, 3.1vw, 2.7rem);
  line-height:1.14; letter-spacing:-.005em; color:var(--ink);
}
.lede{
  margin-top:18px; max-width:46ch;
  font-size:.94rem; line-height:1.72; 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 .875rem/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(--navy); color:var(--on-dark); }
.btn--solid:hover{ background:var(--navy-deep); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--navy); background:rgba(0,39,73,.06); transform:translateY(-1px); }
.btn--sm{ padding:11px 22px; font-size:.82rem; }
.btn--full{ width:100%; }
.btn .ico{ width:15px; height:15px; 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:.85rem; 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(--navy); border-bottom-color:var(--navy); }
.link .ico{ width:15px; height:15px; transition:transform .25s var(--ease); }
.link:hover .ico{ transform:translateX(3px); }

/* ---------- 6. Görseller ----------
   Fotoğraf yüklenene kadar (veya dosya eksikse) maviye çalan
   degrade zemin görünür; böylece yerleşim hiçbir durumda bozulmaz.
   Farklı kaynaklardan gelen fotoğrafları tek bir görsel dile
   oturtmak için hafif bir soğutma/doygunluk ayarı uygulanır. */
.media{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:linear-gradient(155deg, var(--ph1,#D6E0E8) 0%, var(--ph2,#9FB4C4) 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(.88) contrast(1.03) brightness(1.01);
}
.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% 34%; }
.media--1{ --ph1:#DCE5EC; --ph2:#A6BAC9; }
.media--2{ --ph1:#D8E2EA; --ph2:#A2B7C6; }
.media--3{ --ph1:#D2DDE6; --ph2:#9BB1C2; }
.media--4{ --ph1:#DBE4EB; --ph2:#A8BCCA; }
.media--5{ --ph1:#CFDAE3; --ph2:#96ADBF; }
.media--6{ --ph1:#C9D6E0; --ph2:#8FA7BA; }
.media--7{ --ph1:#D4DEE7; --ph2:#9DB3C4; }
.media--8{ --ph1:#CDDAE1; --ph2:#93ADBB; }
.media--9{ --ph1:#D0DBE4; --ph2:#99B0C1; }
.media--10{ --ph1:#D7E1E9; --ph2:#A1B6C6; }

/* ---------- 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(241,244,247,.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; gap:10px; color:var(--navy-deep); flex:none; }
.logo__mark{ width:56px; height:28px; }
.logo__word{
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); padding-top:2px;
}
.logo--sm .logo__mark{ width:46px; height:23px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-inline:auto; }
.nav a{
  position:relative; font-size:.86rem; 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(--navy); }
.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 ---------- */
/* Sol sütun genişliği, .wrap ile aynı hizaya oturacak biçimde hesaplanır:
   sütun = sayfa kenar boşluğu + içerik genişliğinin %46'sı.
   Böylece metin .wrap hizasında başlar, görsel sağ kenara taşar. */
.hero{
  display:grid;
  grid-template-columns:
    minmax(0, calc((100% - var(--maxw)) / 2 + var(--maxw) * 0.46))
    minmax(0, 1fr);
  align-items:stretch;
  background:var(--shell);
  padding-block:clamp(28px,4vw,52px) clamp(40px,5vw,72px);
}
.hero__copy{
  justify-self:end; align-self:center;
  width:100%; max-width:calc(var(--maxw) * 0.46);
  padding-inline:var(--gut) clamp(24px,3.4vw,56px);
  padding-block:clamp(8px,2vw,28px);
}
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.9rem, 6.4vw, 5.3rem);
  line-height:.96; letter-spacing:.004em;
  text-transform:uppercase; color:var(--ink);
}
.hero__lead{
  margin-top:clamp(18px,2vw,28px);
  font-size:clamp(1.02rem, 1.35vw, 1.24rem);
  line-height:1.52; color:var(--ink-2);
}
.hero__note{ font-size:.9rem; line-height:1.68; color:var(--muted); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero__media{
  position:relative; margin:0;
  min-height:clamp(320px, 44vw, 560px);
  border-radius:0 0 0 26px;
}
/* Maketteki "Bugünün Sorusu" kara tahtası */
.hero__badge{
  position:absolute; right:clamp(16px,3vw,42px); bottom:clamp(18px,4vw,54px); z-index:2;
  width:clamp(108px,11vw,142px); aspect-ratio:1/.86;
  background:var(--navy-deep); border-radius:var(--r);
  border:3px solid var(--navy-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(0,20,38,.3);
}
.hero__badge-txt{ font-family:var(--script); font-style:italic; font-size:.95rem; line-height:1.25; }
.hero__badge-q{
  font-family:var(--script); font-style:italic; font-size:1.5rem;
  line-height:1; margin-top:2px; color:var(--accent);
}

/* ---------- 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(5,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(--navy-soft);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.feat:hover .feat__ico{ border-color:var(--navy); color:var(--navy); }
.feat__t{ font-family:var(--sans); font-size:.88rem; font-weight:500; color:var(--ink); }
.feat__d{ margin-top:5px; font-size:.79rem; line-height:1.58; color:var(--muted); }

/* ---------- 10. İkiye bölünmüş bölümler ---------- */
.sec{ padding-block:clamp(52px,7vw,104px); background:var(--paper); }
.sec--alt{ background:var(--shell); }

.split{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:clamp(30px,4.5vw,76px);
  align-items:start;
}
.split__intro .btn,
.split__intro .link{ margin-top:28px; }

/* Yaklaşımımız — altı sütunlu saç teli ızgara */
.pillars{
  display:grid; grid-template-columns:repeat(6,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(22px,2vw,32px) 14px clamp(24px,2.2vw,32px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  transition:background-color .3s var(--ease);
}
.pillar:hover{ background:#DCE7EF; }
.pillar .ico{ color:var(--navy-soft); }
.pillar h3{ font-family:var(--serif); font-weight:500; font-size:1.12rem; color:var(--ink); }
.pillar p{ font-size:.77rem; line-height:1.55; color:var(--muted); }

/* Programımız — dört kart */
.progs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.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:1/1.02; border-radius:0; }
.prog .media > img{ transition:transform .6s var(--ease); }
.prog:hover .media > img{ transform:scale(1.045); }
.prog__body{ padding:16px 16px 22px; }
.prog__body h3{ font-family:var(--serif); font-weight:500; font-size:1.06rem; color:var(--ink); }
.prog__body p{ margin-top:7px; font-size:.78rem; line-height:1.6; color:var(--muted); }

/* ---------- 11. Atölyeler ---------- */
.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__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); }

.studio{ aspect-ratio:1/1.04; }
.studio > img{ transition:transform .7s var(--ease); }
.studio:hover > img{ transform:scale(1.06); }
.studio::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(0,17,32,.9) 0%, rgba(0,17,32,.52) 38%, rgba(0,17,32,.06) 72%);
}
.studio__body{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:18px 16px 18px;
  display:grid; grid-template-columns:1fr auto; align-items:end;
  column-gap:12px; row-gap:0; color:var(--on-dark);
}
.studio__body h3{
  grid-column:1; font-family:var(--serif); font-weight:500;
  font-size:1.08rem; line-height:1.22;
}
.studio__body p{
  grid-column:1; margin-top:6px;
  font-size:.76rem; line-height:1.5; color:rgba(238,243,247,.82);
}
.studio__go{
  grid-column:2; grid-row:1 / span 2; align-self:end;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(238,243,247,.6);
  display:grid; place-items:center; color:var(--on-dark);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.studio__body:hover .studio__go,
.studio__body:focus-visible .studio__go{
  background:var(--accent); color:#FFFFFF; border-color:var(--accent);
}

/* ---------- 12. Koyu değerler bandı ---------- */
.band{ background:var(--navy); 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(238,243,247,.2); }
.value__ico{
  flex:none; width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(238,243,247,.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.06rem; line-height:1.24; }
.value p{ margin-top:7px; font-size:.78rem; line-height:1.58; color:var(--on-dark-mut); }

/* ---------- 13. 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.14rem; 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:.8rem; line-height:1.5; color:var(--muted); }
.checks .ico{ color:var(--navy-soft); margin-top:1px; }
.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.5rem,2.4vw,2.05rem); line-height:1.2; color:var(--ink);
}
.closing__p{
  margin:16px auto 0; max-width:44ch;
  font-size:.84rem; line-height:1.72; color:var(--muted);
}
.quote{
  margin:22px 0 0;
  font-family:var(--script); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.34;
  color:var(--navy-deep);
}

.contact__t{ font-family:var(--serif); font-weight:500; font-size:1.14rem; 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:.84rem; color:var(--ink-2); }
.contact__list .ico{ color:var(--navy-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(--navy); border-bottom-color:var(--navy); }
.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:.8rem; color:var(--muted); transition:color .2s var(--ease); }
.foot__nav a:hover{ color:var(--navy); }

.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(--navy); }

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

/* ---------- 14. Video katmanı ---------- */
.modal{
  width:min(920px, 92vw); padding:0; border:0; border-radius:6px;
  background:var(--navy-deep); color:var(--on-dark); overflow:visible;
}
.modal::backdrop{ background:rgba(0,20,38,.75); 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(--navy-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:.85rem; color:var(--on-dark-mut);
}

/* ---------- 15. 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; }
}

/* ---------- 16. Duyarlı yerleşim ---------- */
@media (max-width: 1180px){
  .strip__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:30px; }
  .pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .studios__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .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(13,31,46,.12);
    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:.95rem; }
  .nav a::after{ display:none; }
  .burger{ display:inline-flex; }
  .hdr__cta{ margin-left:auto; }
  .hdr__in{ gap:12px; }
}

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; padding-bottom:0; }
  .hero__copy{
    justify-self:stretch; max-width:none;
    padding-inline:var(--gut);
  }
  .hero__media{
    min-height:0; aspect-ratio:16/11;
    margin-top:clamp(28px,5vw,44px); border-radius:0;
  }
  .split{ grid-template-columns:1fr; gap:32px; }
  .progs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .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:66px; }
  .strip__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studios__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio{ aspect-ratio:1/1.12; }
  .foot__grid{ grid-template-columns:1fr; }
  .logo__word{ display:none; }
  .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; }
  .progs{ grid-template-columns:1fr; }
  .studios__grid{ grid-template-columns:1fr; }
  .studio{ aspect-ratio:4/3; }
  .band__grid{ grid-template-columns:1fr; }
  .value{ padding-inline:0; }
  .value + .value{ border-inline-start:0; border-top:1px solid rgba(238,243,247,.2); padding-top:26px; }
  .hero__badge{ display:none; }
}