/* ============================================================
   Duolingo — Instagram post system (1080 x 1350)
   Shared stylesheet for post-1.html, post-2.html, post-3.html

   TYPE: the measured site family is "duolingo-sans" (Feather Bold),
   a proprietary rounded-geometric face not on Google Fonts.
   Closest Google equivalents, chosen for the same rounded
   terminals, tall x-height and heavy display weights:
     display -> Nunito (800/900)
     body    -> Nunito Sans (400/600/700)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');

:root{
  /* palette — measured from duolingo.com */
  --green:      #58cc02;
  --green-deep: #45a302;
  --lime:       #d7ffb8;
  --blue:       #1cb0f6;
  --sky:        #ddf4ff;
  --red:        #ff4b4b;
  --yellow:     #ffc800;
  --navy:       #100f3e;
  --ink:        #3c3c3c;
  --ink-strong: #131313;
  --muted:      #777777;
  --line:       #e5e5e5;
  --white:      #ffffff;

  /* type scale */
  --d1: 112px;   /* post 1 statement */
  --d2: 76px;    /* post 2 / 3 headline */
  --lead: 34px;
  --body: 30px;
  --label: 24px;

  /* geometry */
  --pad: 72px;
  /* Üst bar KALDIRILDI. Blok konumları tuvalin tepesinden ölçülü yazıldığı için
     (top: calc(X - var(--bar))) bu değeri 0 yapmak bütün yerleşimi olduğu gibi
     korur; tek fark, üstteki beyaz şeridin yok olması ve postun kendi zemininin
     kenardan kenara akması. */
  --bar: 0px;
  --logo-w: 108px;  /* 10% of the 1080 canvas — signature, not hero */
}

*{ box-sizing: border-box; }

/* figure/p tarayıcı varsayılan kenar boşluğu taşıyor. Mutlak konumlu bir
   figure'da bu boşluk kutuyu içeri çekiyor: post-3'ün tam kadraj fotoğrafı
   40px soldan, 16px üstten içeride duruyordu (ekrandaki "kayma" buydu). */
figure{ margin:0; }

html,body{ margin:0; padding:0; }
body{
  background:#e8e8e8;
  display:flex; align-items:flex-start; justify-content:center;
  font-family:'Nunito Sans', system-ui, -apple-system, 'Trebuchet MS', sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- frame ---------- */
.post{
  position:relative;
  width:1080px; height:1350px;
  overflow:hidden;
  background:var(--white);
  color:var(--ink-strong);
}

/* ---------- brand mark (bar YOK — logo kompozisyonun içinde yüzüyor) ----------
   Beyaz şerit üç postta da aynı yerde durunca set şablon gibi görünüyordu.
   Logo artık zemine oturuyor; okunurluğu şerit değil, filtre sağlıyor. */
.brandmark{
  position:absolute; z-index:6;
  left:var(--pad); top:72px;
  width:var(--logo-w); height:auto; display:block;
}
/* Koyu ya da marka renkli zeminde: yeşil wordmark'ı beyaza çevirir. */
.brandmark--light{ filter:brightness(0) invert(1); }
/* Fotoğrafın üstünde: logo olduğu gibi durur — filtre yok, gölge yok. */
.brandmark--onPhoto{ filter:none; }

/* ---------- shared typography ---------- */
.display{
  font-family:'Nunito', system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-0.025em;
  margin:0;
}
.h-xl{ font-size:var(--d1); line-height:0.94; }
.h-lg{ font-size:var(--d2); line-height:1.02; }
.lead{
  font-size:var(--lead); line-height:1.42; font-weight:600; margin:0;
}
.note{
  font-size:26px; line-height:1.4; font-weight:700; margin:0;
}

/* ---------- chips ---------- */
.chips{ display:flex; gap:14px; flex-wrap:wrap; }
.chip{
  font-size:var(--label); font-weight:700; line-height:1;
  padding:15px 26px; border-radius:999px; white-space:nowrap;
}
.chip--onGreen{ background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.45); color:#fff; }
.chip--onLime { background:#ffffff; border:2px solid #c2e9a0; color:var(--ink); }
.chip--onNavy { background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.30); color:#ffffff; }

/* ---------- button (one primary, post 3 only) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:80px; padding:0 46px;
  background:var(--green); color:#ffffff;
  font-family:'Nunito', system-ui, sans-serif; font-weight:900;
  font-size:32px; letter-spacing:.005em;
  border:0; border-radius:18px;
  box-shadow:0 6px 0 var(--green-deep);
}
.btn:focus-visible{ outline:4px solid #ffffff; outline-offset:4px; }

/* ============================================================
   POST 1 — THE PROMISE
   ============================================================ */
/* ------------------------------------------------------------------
   POST 1 yeniden kuruldu: iki sütunlu asimetrik yerleşim.
   - Arkadaki lime DAİRE KALDIRILDI. İllüstrasyon zaten şeffaf (Lottie
     çıkışı SVG), altına şekil koymak onu sticker'a çeviriyordu.
   - İllüstrasyon büyüdü (400 → 560) ve sağ alt köşeden hafifçe taşıyor:
     kompozisyona derinlik veren tek hamle artık o.
   - Yazı sütunu solda tek eksende hizalı; metin ile görsel yatayda
     ÇAKIŞMIYOR (yazı en fazla 512px'e kadar, görsel 540px'ten başlıyor).
   ------------------------------------------------------------------ */
/* Zemin yeşilden LACİVERTE alındı: illüstrasyonun kendisi yeşil ağırlıklı,
   yeşil zeminde gövdesi zemine karışıp hacmini (gölge/derinlik) kaybediyordu.
   Lacivert, paletin içinden gelen en koyu değer — hem markanın kendi rengi
   hem de açık gövdeli görseli en çok ayıran zemin. */
.p1{ background:var(--navy); }
.p1 .stage{ position:relative; height:calc(1350px - var(--bar)); }

/* Logo bu postta ORTADA. */
.p1 .brandmark{ left:50%; transform:translateX(-50%); }

.p1 .owl{
  position:absolute; z-index:2;
  width:640px; height:640px;      /* 560 → 640 */
  left:auto; top:auto;
  right:-60px; bottom:-20px;      /* kutu 500px'te başlar, yazı sütunu 492'de biter */
}
.p1 .copy{
  position:absolute; z-index:3;
  left:var(--pad); top:calc(190px - var(--bar));
  width:940px;                    /* 860 → 940: başlık tuvalin genişliğini kullanıyor */
}
.p1 .h-xl{ color:#ffffff; text-shadow:0 4px 0 rgba(0,0,0,.07); }
.p1 .sub{
  position:absolute; z-index:3;
  left:var(--pad); top:calc(650px - var(--bar));
  /* 460: metin sütununun sağ kenarı 532'de biter, illüstrasyon 540'ta başlar.
     500'de iki kutu 32px çakışıyordu. */
  width:400px; color:#f2ffe4;
}
/* İstatistik bloğu 1046'da başlayıp 1210'da bitiyordu, çip satırı ise 1180'de
   başlıyordu: 30px üst üste biniyorlardı ve yazı yazının üstüne geliyordu.
   İkisi ayrıldı, aralarında 46px nefes var. */
.p1 .stat{
  position:absolute; z-index:3;
  left:var(--pad); top:calc(900px - var(--bar));
  width:420px;
}
.p1 .stat .big{
  font-family:'Nunito', system-ui, sans-serif; font-weight:900;
  font-size:44px; line-height:1.05; color:#ffffff; margin:0;
}
.p1 .stat .small{
  font-size:24px; font-weight:600; color:#e6ffcd; margin:8px 0 0;
}
.p1 .chips{
  position:absolute; z-index:3;
  left:var(--pad); top:calc(1150px - var(--bar));
  width:400px;
}
/* Sütun daraldığı için çipler iki satıra düşüyordu; bu postta bir tık küçükler
   ve tek satırda kalıyorlar. */
.p1 .chip{ font-size:21px; padding:13px 20px; }

/* ============================================================
   POST 2 — THE RANGE
   ============================================================ */
.p2{ background:var(--lime); }
.p2 .stage{ position:relative; height:calc(1350px - var(--bar)); }

.p2 .headline{
  position:absolute; left:var(--pad); top:calc(206px - var(--bar));
  width:840px; color:var(--ink-strong);
}
.p2 .sub{
  position:absolute; left:var(--pad); top:calc(392px - var(--bar));
  width:760px; color:#3f5a2a;
}
.p2 .chips{
  position:absolute; left:var(--pad); top:calc(520px - var(--bar));
  width:936px;
}
.p2 .grid{
  position:absolute; left:var(--pad); top:calc(640px - var(--bar));
  width:936px;
  display:grid; grid-template-columns:repeat(4, 216px);
  gap:24px;
}
.p2 .lang{
  height:180px; padding:22px 24px;
  background:#ffffff; border:2px solid #cfe9b6; border-bottom-width:8px;
  border-radius:22px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.p2 .lang .name{
  font-family:'Nunito', system-ui, sans-serif; font-weight:800;
  font-size:34px; line-height:1.05; color:var(--ink-strong);
  letter-spacing:-0.01em;
}
.p2 .lang .kicker{
  font-size:20px; font-weight:700; color:var(--muted); margin-bottom:6px;
}
.p2 .lang--active{
  background:var(--green); border-color:var(--green-deep);
  justify-content:space-between;
}
.p2 .lang--active .name{ color:#ffffff; }
.p2 .lang--active .kicker{ color:#e6ffcd; }
.p2 .lang--active .flag{ width:76px; height:auto; display:block; }

/* ============================================================
   POST 3 — THE HABIT
   ============================================================ */
.p3{ background:var(--navy); }
.p3 .stage{ position:relative; height:calc(1350px - var(--bar)); }

/* Fotoğraf 880'e kadar iner: alt bloğun (ground) başladığı yere kadar. Bar
   kalkınca yükseklik 748'de kalsaydı fotoğrafın altıyla yazı bloğu arasında
   132px'lik boş bir lacivert şerit açılır, başlık da fotoğrafın kenarını
   keserdi — ekrandaki "kayma" tam olarak buydu. */
.p3 .hero{                                   /* z-0 : photo */
  position:absolute; z-index:0; left:0; right:0;
  top:0; height:880px;
  overflow:hidden;
}
.p3 .hero img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; }
.p3 .scrim{                                  /* z-1 : one-way scrim */
  position:absolute; z-index:1; left:0; right:0;
  top:0; height:880px;
  background:linear-gradient(180deg,
      rgba(16,15,62,0) 38%,
      rgba(16,15,62,.55) 66%,
      rgba(16,15,62,.92) 88%,
      var(--navy) 100%);
}
.p3 .headline{                               /* z-2 : text on photo */
  position:absolute; z-index:2;
  /* 668 → 704: başlık örtünün en koyu bandına iniyor, fotoğrafın alt
     kenarıyla arasında 21px kalıyor. */
  left:var(--pad); top:calc(704px - var(--bar));
  width:860px; color:#ffffff;
}
.p3 .ground{
  position:absolute; z-index:2; left:0; right:0;
  top:calc(880px - var(--bar)); bottom:0;
  padding:44px var(--pad) 0;
  background:transparent;
}
.p3 .sub{ width:800px; color:#cfd0e8; }
.p3 .chips{ margin-top:30px; }
/* Buton solda, "iOS / Android / web" satırı SAĞ ALT köşede: satır artık tuvalin
   iki kenarına da yaslı ve not `margin-left:auto` ile sağa itiliyor. */
.p3 .cta-row{
  position:absolute; left:var(--pad); right:var(--pad); bottom:76px;
  display:flex; align-items:center; gap:26px;
}
.p3 .appicon{ width:84px; height:84px; border-radius:20px; display:block; }
.p3 .cta-note{
  font-size:22px; font-weight:600; color:#a9abd0; line-height:1.35;
  margin-left:auto; width:auto; max-width:280px; text-align:right;
}