/* ==========================================================================
   Önallar 1957 — stil
   Palet marka kılavuzundan (İmaj s03) alındı, ama BEKLENEN kullanımın tersine:
   bejler zemin değil MÜREKKEP. Zemin, olgunlaştırma odasının koyu grisi.
   Peynir ve tereyağı zaten krem renkli; koyu zeminde ürün ışık kaynağı olur.
   İmza öğe: logodaki ÇİFT ÇİZGİ + sağ ucuna raptedilmiş veri (.cizgili).
   ========================================================================== */

:root{
  /* marka renkleri */
  --antrasit:#323232;      /* 1 Antrasit Gri */
  --beyaz:#FFFFFF;         /* 2 Beyaz */
  --kum:#D6B18C;           /* 3 Kum Beji */
  --sut:#DFD0B8;           /* 4 Açık Bej */
  --gri-mavi:#393E46;      /* 5 Koyu Gri Mavi */

  /* türetilenler */
  --dip:#2B2F35;           /* ana zemin: antrasit ile gri-mavi arası */
  --kat:#343941;           /* yükselen yüzey */
  --is:#A1A7AF;            /* ikincil metin — zemine doğru sapmış nötr gri (--kat üzerinde 4,79) */
  --kagit:#F2EDE4;         /* açık bant */
  --kagit-is:#625B4D;      /* açık bantta ikincil metin */
  --cizgi:rgba(223,208,184,.26);
  --cizgi-kagit:rgba(50,50,50,.18);

  --govde:"Bitter",Georgia,serif;
  --gosteri:"Bodoni Moda","Bitter",Georgia,serif;

  --en:1220px;
  --olik:clamp(20px,5vw,40px);   /* yan boşluk */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dip);color:var(--sut);
  font:400 17px/1.65 var(--govde);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* --- erişilebilirlik --------------------------------------------------- */
:focus-visible{outline:2px solid var(--kum);outline-offset:3px;border-radius:2px}
.atla{position:absolute;left:-9999px;top:0;background:var(--kum);color:var(--antrasit);
  padding:.7rem 1.1rem;font-weight:700;z-index:99}
.atla:focus{left:.5rem;top:.5rem}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- düzen ------------------------------------------------------------- */
.kap{max-width:var(--en);margin-inline:auto;padding-inline:var(--olik)}
section{padding-block:clamp(4.5rem,9vw,8rem)}

/* --- tipografi --------------------------------------------------------- */
h1,h2,h3{margin:0;font-family:var(--gosteri);font-weight:500;
  letter-spacing:-.012em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.6vw,5.1rem);line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(1.95rem,4.2vw,3.3rem)}
h3{font-family:var(--govde);font-weight:700;font-size:1.0625rem;line-height:1.35;
  letter-spacing:.005em}
p{margin:0}
.giris{font-size:clamp(1.0625rem,1.5vw,1.2rem);line-height:1.62;color:var(--sut);
  max-width:56ch}
.ince{color:var(--is);max-width:62ch}

/* --- İMZA ÖĞE: çift çizgi + raptedilmiş veri --------------------------- */
/* Logoda ÖNALLAR'ın altındaki 2px+1px çizgi ikilisi ve sağ ucundaki 1957.  */
.cizgili{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);margin-top:1.5rem}
.cift{flex:1 1 auto;height:5px;
  border-top:2px solid var(--sut);
  border-bottom:1px solid rgba(223,208,184,.5)}
.im{flex:0 0 auto;font-family:var(--govde);font-weight:700;
  font-size:.8125rem;letter-spacing:.14em;color:var(--kum);
  white-space:nowrap}
/* açık bantta */
.acik .cift{border-top-color:var(--antrasit);border-bottom-color:rgba(50,50,50,.45)}
.acik .im{color:#7F5F3C}   /* açık bantta 5,00 */

/* --- düğmeler ---------------------------------------------------------- */
.eylemler{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.dugme{display:inline-block;font-family:var(--govde);font-weight:700;font-size:.9375rem;
  letter-spacing:.02em;padding:.85rem 1.6rem;text-decoration:none;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.dugme-asil{background:var(--kum);color:var(--antrasit)}
.dugme-asil:hover{background:var(--sut)}
.dugme-yalin{border-color:var(--cizgi);color:var(--sut)}
.dugme-yalin:hover{border-color:var(--sut);background:rgba(223,208,184,.07)}

/* --- üst bar ----------------------------------------------------------- */
.ust{position:sticky;top:0;z-index:40;background:rgba(43,47,53,.94);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--cizgi)}
.ust .kap{display:flex;align-items:center;gap:1.5rem;
  padding-block:.85rem}
.marka{flex:0 0 auto;display:block;line-height:0}
.marka img{width:clamp(126px,15vw,168px)}
.gezinti{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.9rem)}
.gezinti a{font-size:.9375rem;text-decoration:none;color:var(--sut);
  padding-block:.35rem;border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.gezinti a:hover{border-bottom-color:var(--kum)}
.gezinti a.dugme{border-bottom:1px solid transparent}
.gezinti a.dugme:hover{border-bottom-color:transparent}
.menu-dugme{display:none}

/* --- HERO -------------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,7vw,6.5rem) clamp(4rem,8vw,7rem);overflow:hidden}
.hero .kap{display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:end}
.hero-yazi{min-width:0}
.hero-ust{font-family:var(--govde);font-size:.8125rem;font-weight:700;
  letter-spacing:.16em;color:var(--kum);margin-bottom:1.6rem}
.hero .giris{margin-top:1.9rem}
.hero-gorsel{position:relative;margin:0;min-width:0}
.hero-gorsel img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:52% 42%}
.hero-gorsel figcaption{font-size:.8125rem;color:var(--is);margin-top:.85rem;
  padding-left:.9rem;border-left:1px solid var(--cizgi);line-height:1.45}

/* tek düzenlenmiş hareket: çizgi soldan sağa çizilir, sonra 1957 belirir */
@keyframes ciz{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes belir{from{opacity:0}to{opacity:1}}
.hero .cift{transform-origin:left;animation:ciz .95s cubic-bezier(.62,.02,.2,1) .2s both}
.hero .im{animation:belir .5s ease 1.05s both}
@media (prefers-reduced-motion:reduce){
  .hero .cift,.hero .im{animation:none}
}

/* --- zaman çizgisi (gerçek sıra: 1957 → 2024) -------------------------- */
.miras .kap{display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);align-items:start}
.miras-gorsel{margin:0;position:sticky;top:6rem}
.miras-gorsel img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.miras-gorsel figcaption{font-size:.8125rem;color:var(--is);margin-top:.85rem;line-height:1.45}
.kusaklar{list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;gap:0}
.kusaklar li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2rem);padding-block:1.6rem;border-top:1px solid var(--cizgi)}
.kusaklar li:last-child{border-bottom:1px solid var(--cizgi)}
.yil{font-family:var(--gosteri);font-size:1.5rem;font-weight:500;color:var(--kum);
  line-height:1;padding-top:.15rem;font-variant-numeric:tabular-nums}
.kusaklar h3{margin-bottom:.4rem}
.kusaklar p{font-size:.9375rem;color:var(--is);line-height:1.6}

/* --- açık bant: ürünler ------------------------------------------------ */
.acik{background:var(--kagit);color:var(--antrasit)}
.acik .ince{color:var(--kagit-is)}
.acik .giris{color:var(--antrasit)}

.ornekler{list-style:none;margin:3.5rem 0 0;padding:0;display:grid;gap:0}
.ornek{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--cizgi-kagit)}
.ornek:last-child{border-bottom:1px solid var(--cizgi-kagit)}
.ornek img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ornek-gorselsiz{width:100%;aspect-ratio:4/5;background:var(--kum);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.5rem;font-size:.8125rem;line-height:1.5;color:#4A3C2C}
.ornek-ad{font-family:var(--gosteri);font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-weight:500;line-height:1.05;letter-spacing:-.012em;margin:0}
.ornek-alt{font-size:.9375rem;color:var(--kagit-is);margin-top:1.4rem;max-width:52ch}
.kunye{margin:1.75rem 0 0;display:grid;gap:0}
.kunye div{display:grid;grid-template-columns:minmax(8.5rem,.35fr) minmax(0,1fr);
  gap:1rem;padding-block:.62rem;border-top:1px solid var(--cizgi-kagit);
  font-size:.9375rem}
.kunye dt{color:var(--kagit-is)}
.kunye dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.ty{color:#7F5F3C;font-weight:400;font-size:.75em;vertical-align:super;
  margin-left:.15em;cursor:help}
.dipnot{margin-top:2.25rem;font-size:.8125rem;color:var(--kagit-is);
  font-style:italic;max-width:64ch}

/* --- üretim aşamaları (gerçek sıra) ------------------------------------ */
.uretim .kap{display:grid;gap:clamp(2rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.46fr);align-items:start}
.uretim-bas{grid-column:1;grid-row:1;min-width:0}
.uretim-gorsel{grid-column:2;grid-row:1/span 2;align-self:start}
.asamalar{grid-column:1;grid-row:2;list-style:none;margin:.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.25rem,3vw,2.5rem)}
.asamalar li{padding-block:1.35rem;border-top:1px solid var(--cizgi)}
.sira{font-family:var(--govde);font-size:.75rem;font-weight:700;letter-spacing:.14em;
  color:var(--kum);display:block;margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.asamalar h3{font-size:1rem;margin-bottom:.35rem}
.asamalar p{font-size:.875rem;color:var(--is);line-height:1.55}
.uretim-gorsel img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 26%}
.uretim-gorsel figcaption{font-size:.8125rem;color:var(--is);margin-top:.85rem;line-height:1.45}

/* --- markalar ---------------------------------------------------------- */
.markalar{background:var(--kat)}
.uclu{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:0
  clamp(1.5rem,3.5vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.uclu li{padding-block:1.75rem;border-top:1px solid var(--cizgi)}
.uclu h3{font-family:var(--gosteri);font-weight:500;font-size:1.65rem;
  letter-spacing:-.01em;margin-bottom:.75rem}
.uclu p{font-size:.9375rem;color:var(--is);line-height:1.6}
.uclu .rol{display:block;font-family:var(--govde);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;color:var(--kum);margin-bottom:.9rem}
.markalar-gorsel{margin:3.5rem 0 0}
.markalar-gorsel img{width:100%;height:clamp(260px,32vw,450px);object-fit:cover;object-position:50% 58%}
.markalar-gorsel figcaption{font-size:.8125rem;color:var(--is);margin-top:.85rem}

/* --- mağaza ------------------------------------------------------------ */
.magaza .kap{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));align-items:start}
.bilgi{margin:0;display:grid;gap:0}
.bilgi div{padding-block:.85rem;border-top:1px solid var(--cizgi)}
.bilgi dt{font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--kum);
  margin-bottom:.3rem}
.bilgi dd{margin:0;font-size:.9375rem;line-height:1.55}
.bekliyor{color:var(--is);font-style:italic}

/* --- alt bar ----------------------------------------------------------- */
.alt{border-top:2px solid var(--sut);position:relative}
.alt::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;
  background:rgba(223,208,184,.5)}
.alt .kap{padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.alt-marka img{width:190px;margin-bottom:1.1rem}
.alt h3{font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--kum);
  margin-bottom:1rem}
.alt ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.alt a{font-size:.9375rem;text-decoration:none;border-bottom:1px solid transparent}
.alt a:hover{border-bottom-color:var(--kum)}
.alt p{font-size:.9375rem;color:var(--is);line-height:1.6}
.alt .duz li{font-size:.9375rem;color:var(--is)}
.kunye-satir{border-top:1px solid var(--cizgi);margin-top:1rem}
.kunye-satir .kap{padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  justify-content:space-between;align-items:center}
.kunye-satir p{margin:0;font-size:.8125rem;color:var(--is)}

/* --- duyarlı ----------------------------------------------------------- */
@media (max-width:900px){
  .hero .kap,.miras .kap,.uretim .kap{grid-template-columns:minmax(0,1fr)}
  .uretim-bas,.uretim-gorsel,.asamalar{grid-column:1;grid-row:auto}
  .hero .kap{align-items:start}
  .hero-gorsel{order:-1}
  .hero-gorsel img{aspect-ratio:16/11;object-position:50% 56%}
  .miras-gorsel{position:static}
  .miras-gorsel img{aspect-ratio:16/10}
  .ornek{grid-template-columns:minmax(0,1fr)}
  .ornek img,.ornek-gorselsiz{aspect-ratio:16/11;max-height:340px}
}
@media (max-width:760px){
  .gezinti{position:fixed;inset:0 0 auto;top:0;background:var(--dip);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.1rem;padding:5.5rem var(--olik) 3rem;height:100dvh;
    transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    border-bottom:1px solid var(--cizgi);overflow-y:auto}
  .gezinti[data-acik="1"]{transform:translateY(0)}
  .gezinti a{font-family:var(--gosteri);font-size:1.75rem;font-weight:500}
  .gezinti a.dugme{font-family:var(--govde);font-size:.9375rem;margin-top:.5rem}
  .marka{position:relative;z-index:50}
  .menu-dugme{display:block;margin-left:auto;background:none;border:1px solid var(--cizgi);
    color:var(--sut);font:700 .875rem/1 var(--govde);letter-spacing:.08em;
    padding:.7rem 1rem;cursor:pointer;z-index:50;min-height:44px}
  .kusaklar li{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .yil{font-size:1.25rem}
  .kunye div{grid-template-columns:minmax(0,1fr);gap:.15rem;padding-block:.7rem}
  .kunye dt{font-size:.8125rem}
  .asamalar{grid-template-columns:minmax(0,1fr)}
}