/* =====================================================================
   FERRINI — base.css
   Sıfırlama, 3 yazı rolü, ortak bileşenler (buton, kart, cam kart, rozet,
   bölüm başlığı), bölüm ritmi, görünürlük animasyonu, alt bulanıklık.
   Bütün değerler tokens.css'ten gelir; burada sabit renk/boyut yazılmaz.
   Kırılımlar: 560 (mobil) · 900 (tablet) · 1024 (masaüstü) — tokens ile aynı.
   ===================================================================== */

/* ---------- sıfırlama ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--text-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";
}
/* height:auto şart: includes/gorsel.php her <img>'e width/height niteliği ekliyor (CLS için);
   bu nitelikler CSS'te yükseklik serbest bırakılmazsa görseli kendi oranından koparıyor.
   Kutuyu doldurması gereken görseller kendi kuralında height:100% veriyor, o kural bunu geçer. */
img{display:block;max-width:100%;height:auto}
/* includes/gorsel.php webp <source> için her görseli <picture> ile sarıyor;
   display:contents sarmalayıcıyı kutu ağacından çıkarır, yani düzen eskisi gibi
   kalır (img hâlâ kapsayıcısının doğrudan kutusu gibi davranır). */
picture{display:contents}
a{color:inherit;text-decoration:none}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display)}
.page{background:var(--color-paper);overflow-x:clip}

/* ---------- 3 yazı rolü ---------- */
/* 1) Başlık: h1–h6 (yukarıda)  2) Metin: body  3) Etiket: .label */
.label{font-family:var(--font-label);font-weight:var(--weight-label);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:var(--transform-label)}
.lead-text{font-size:var(--text-body-lg);line-height:1.7;color:var(--color-ink);max-width:36em}
.muted{color:var(--color-ink-soft)}

/* ---------- kapsayıcı ve bölüm ritmi ---------- */
.wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.hr{height:1px;background:var(--color-line)}
/* nefes payı bölümlerin ARASINDA: her üst düzey bölüm bir önceki bölümden --gap-section kadar uzak */
.page>section,.page>.cta-wrap{margin-top:var(--gap-section)}
.page>.hero{margin-top:0}
.page>.manifesto{margin-top:calc(var(--gap-section) * .8)}

/* bölüm başlığı: solda etiket + başlık, sağda alt çizgili link */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:0 0 22px}
.sec-head .label{color:var(--color-accent);display:block;margin-bottom:14px}
.sec-head h2,.sec-head h3{font-size:var(--text-h3)}
.sec-head p{font-size:var(--text-body);color:var(--color-ink-soft);margin-top:6px}
.sec-head .link{margin-bottom:6px}
@media (max-width:560px){.sec-head{flex-direction:column;gap:8px;align-items:flex-start}}

/* ---------- görünürlük animasyonu ---------- */
.rv{opacity:0;transform:translateY(var(--reveal-offset));transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}.rv.d4{transition-delay:.48s}

/* ---------- butonlar ---------- */
/* alt çizgili etiket buton ("Tümünü Gör") */
.link{position:relative;display:inline-block;padding-bottom:4px;font-family:var(--font-label);font-weight:var(--weight-label);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:var(--transform-label)}
.link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--btn-link-underline);background:currentColor;transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:left}

/* hap buton: sol yazı, sağda ok dairesi. Varsayılan hali cam (fotoğraf üstü); .dark ana aksiyon, .light beyaz */
.pill{
  display:inline-flex;align-items:center;gap:14px;padding:var(--btn-pill-pad);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;
  font-family:var(--font-label);font-weight:var(--weight-label);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:var(--transform-label);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.pill:hover{background:rgba(255,255,255,.24)}
.pill i{display:grid;place-items:center;width:var(--btn-pill-icon);height:var(--btn-pill-icon);border-radius:50%;background:#fff;color:var(--color-ink);transition:transform .5s var(--ease)}
.pill:hover i{transform:rotate(45deg)}
.pill svg{width:15px;height:15px}
.pill.dark{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:var(--btn-primary-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.pill.dark i{background:var(--btn-primary-fg);color:var(--btn-primary-bg)}
.pill.dark:hover{background:var(--color-hover-dark)}
.pill.light{background:var(--btn-light-bg);color:var(--btn-light-fg);border-color:var(--btn-light-bg)}
.pill.light i{background:var(--btn-light-fg);color:var(--btn-light-bg)}
.pill.light:hover{background:#efefef}

/* dikdörtgen buton: yalnızca navbar */
.btn{display:inline-block;padding:8px 16px;border-radius:var(--btn-radius);cursor:pointer;border:0;line-height:1;
  font-family:var(--font-label);font-weight:var(--weight-label);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:var(--transform-label);
  transition:transform .15s,background .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent;color:inherit;box-shadow:none}
.btn.primary{background:#fff;color:var(--color-ink);box-shadow:var(--shadow-nav)}
.btn.dark{background:var(--color-ink);color:#fff}

/* ---------- ürün kartı: krem zemin, 3:4 görsel, hover'da görsel DEĞİŞİR (büyümez) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
@media (min-width:1100px){.pgrid.n5{grid-template-columns:repeat(5,1fr)}.pgrid.n5 .card h4{font-size:17px}}   /* anasayfa öne çıkanlar: 10 aile = 2×5 */
.card{position:relative}
.card .vis{position:relative;overflow:hidden;background:var(--color-card);aspect-ratio:var(--card-media-ratio);border-radius:var(--radius-media)}
.card .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s var(--ease)}
.card .vis img.cut{background:var(--color-card)}     /* şeffaf kesim; sahne görseliyle aynı kadraj */
.card .vis img.alt{opacity:0}
.card:hover .vis img.alt{opacity:1}
.card .wish{position:absolute;top:14px;right:14px;z-index:2;color:#fff;background:rgba(16,18,19,.7);padding:7px 12px;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card:hover .wish{opacity:1;transform:none}
.card .badge{position:absolute;top:14px;left:14px;z-index:2;background:#fff;color:var(--color-ink);padding:6px 10px}
.card h4{font-size:18px;margin-top:16px;line-height:1.25;color:var(--color-ink)}
.card .meta{font-size:var(--text-small);color:var(--color-ink-soft);margin-top:4px}
@media (hover:none){.card.on .vis img.alt{opacity:1}.card.on .wish{opacity:1;transform:none}}   /* mobil: JS ortadaki kartı .on yapar */
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* ---------- haber kartı: krem kart, hover'da görsel büyür + kart yükselir + hap belirir ---------- */
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid-sm)}
.news .n{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--card-bg);padding:var(--card-pad);transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform}
.news .n:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.news .n .vis{position:relative;aspect-ratio:var(--card-news-ratio);overflow:hidden;border-radius:var(--radius-media);background:var(--color-card-line)}
.news .n img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease)}
.news .n:hover img{transform:scale(1.06)}
.news .n .vis::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,10,.45),rgba(6,8,10,0) 55%);opacity:0;transition:opacity .5s var(--ease)}
.news .n:hover .vis::after{opacity:1}
.news .n .date{position:absolute;left:12px;top:12px;z-index:2;padding:7px 10px;border-radius:var(--radius-pill);background:var(--glass-bg);color:var(--color-ink);backdrop-filter:blur(8px)}
.news .n .pill{position:absolute;left:12px;bottom:12px;z-index:2;transform:translateY(14px);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.news .n:hover .pill{transform:none;opacity:1}
.news .n .body{padding:18px 8px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.news .n .label{color:var(--color-ink-soft)}
.news .n :is(h2,h3,h4){font-size:var(--text-h4);line-height:1.25;color:var(--color-ink);transition:color .3s}
.news .n:hover :is(h2,h3,h4){color:var(--color-accent)}
.news .n p{font-size:14px;line-height:1.6;color:var(--color-ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news .n .more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;color:var(--color-ink)}
.news .n .more svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.news .n:hover .more svg{transform:translate(3px,-3px)}
@media (hover:none){.news .n .pill{transform:none;opacity:1}.news .n .vis::after{opacity:1}}
@media (max-width:900px){.news{grid-template-columns:1fr}.news .n{padding:10px 10px 18px}}

/* ---------- cam kart: fotoğraf üstünde krem, koyu metin (numara ve nokta göstergesi 2026-10-01'de kaldırıldı) ---------- */
.glass{
  position:relative;color:var(--color-ink);border-radius:24px;padding:30px 30px 26px;
  background:var(--glass-bg);border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-glass);display:flex;flex-direction:column;justify-content:space-between;gap:34px;
}
.glass .lbl{display:block;font-size:14px;color:var(--color-ink-soft);margin-bottom:12px}
.glass h3{font-size:clamp(22px,2.1vw,30px);line-height:1.18;margin-bottom:22px}
@media (max-width:900px){.glass{padding:22px 22px 20px}}

/* ---------- rozet şeridi (4 madde) ---------- */
.badges .row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:clamp(28px,4vw,48px)}
.badges .b{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.badges .b i{width:44px;height:44px;border-radius:50%;border:1px solid var(--color-card-line);background:var(--color-card);display:grid;place-items:center;color:var(--color-ink)}
.badges .b i svg{width:20px;height:20px}
.badges .b b{display:block;font-weight:400;font-size:15px;margin-bottom:3px;color:var(--color-ink)}
.badges .b span{font-size:var(--text-small);color:var(--color-ink-soft);line-height:1.5}
@media (max-width:900px){.badges .row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.badges .row{grid-template-columns:1fr}}

/* ---------- gradual blur: sayfa altında kademeli bulanık şerit; footer görününce söner (JS .off) ---------- */
.gblur{position:fixed;left:0;right:0;bottom:0;height:4.5rem;z-index:45;pointer-events:none;transition:opacity .5s var(--ease)}
.gblur.off{opacity:0}
.gblur i{position:absolute;inset:0;backdrop-filter:blur(var(--b));-webkit-backdrop-filter:blur(var(--b));
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--a),#000 var(--m),#000 var(--z),transparent calc(var(--z) + 20%));
          mask-image:linear-gradient(to bottom,transparent var(--a),#000 var(--m),#000 var(--z),transparent calc(var(--z) + 20%))}
.gblur i:nth-child(1){--b:1px;--a:0%;--m:20%;--z:40%}
.gblur i:nth-child(2){--b:2px;--a:20%;--m:40%;--z:60%}
.gblur i:nth-child(3){--b:4px;--a:40%;--m:60%;--z:80%}
.gblur i:nth-child(4){--b:8px;--a:60%;--m:80%;--z:100%}
.gblur i:nth-child(5){--b:16px;--a:80%;--m:100%;--z:100%}
@media (max-width:900px){.gblur{height:3.5rem}}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .gblur{display:none}
}

/* Türkçe dışındaki anasayfalarda ilk kart (zip perde) satırı tek başına kaplar: görsel solda,
   ad-özet-seriler sağda. Kart yine tek <a>, iç yapı değişmiyor; yerleşimi grid alanları kuruyor. */
.pgrid.genisli .card.genis{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-rows:1fr auto auto auto auto 1fr;   /* baş ve son satır boşluğu yutar: yazı dikeyde ortalanır */
  column-gap:clamp(24px,4vw,64px);row-gap:8px;align-items:start}
.pgrid.genisli .card.genis .vis{grid-column:1;grid-row:1/7;aspect-ratio:16/11}
.pgrid.genisli .card.genis h4{grid-column:2;grid-row:2;font-size:clamp(22px,2.2vw,32px);line-height:1.12;margin:0}
.pgrid.genisli .card.genis .meta{grid-column:2;grid-row:3;font-size:var(--text-body);line-height:1.6;max-width:36em}
.pgrid.genisli .card.genis .seri{grid-column:2;grid-row:4;display:flex;flex-wrap:wrap;gap:6px 8px;margin:6px 0 0;padding:0;list-style:none}
.pgrid.genisli .card.genis .seri li{font-size:12.5px;line-height:1;padding:7px 12px;border-radius:var(--radius-pill);background:var(--color-card);color:var(--color-ink-soft)}
.pgrid.genisli .card.genis .link{grid-column:2;grid-row:5;justify-self:start;margin-top:10px}
@media (max-width:900px){
  .pgrid.genisli .card.genis{grid-template-columns:1fr;grid-template-rows:none;row-gap:2px}
  .pgrid.genisli .card.genis .vis{grid-column:1;grid-row:auto;aspect-ratio:4/3}
  .pgrid.genisli .card.genis h4{grid-column:1;grid-row:auto;font-size:clamp(20px,5vw,26px);margin-top:12px}
  .pgrid.genisli .card.genis .meta,.pgrid.genisli .card.genis .seri,.pgrid.genisli .card.genis .link{grid-column:1;grid-row:auto}
}