/* ============================================================
   Morad Tea — moradtea.com
   Tek stil dosyası. Bölümler numaralı; renkler :root'ta.
   ============================================================ */

/* 1. Değişkenler ------------------------------------------------ */
:root{
  --kirmizi:#cf4619;        /* ambalajın ana kırmızısı */
  --kirmizi-ac:#e76637;
  --kirmizi-koyu:#a63412;
  --yaprak:#4e7e28;         /* ambalajdaki yeşil */
  --yaprak-ac:#6f972e;
  --altin:#d0a650;          /* logodaki altın çizgi */
  --koyu:#1c1310;           /* demlenmiş çay siyahı */
  --koyu-2:#2a1d17;
  --krem:#fbf5ec;
  --ada:#f1f4e6;            /* Pekoe bölümü: soluk yaprak */
  --kagit:#fff;
  --metin:#3a2c25;
  --metin-ac:#6b574c;
  --cizgi:rgba(28,19,16,.12);

  --kap:1200px;
  --pay:clamp(20px,5vw,40px);
  --bosluk:clamp(56px,9vw,116px);
  --yuvarla:18px;
  --golge:0 18px 48px -24px rgba(28,19,16,.42);
  --golge-buyuk:0 40px 90px -40px rgba(28,19,16,.55);
  --yumusak:cubic-bezier(.2,.7,.3,1);

  --bas:"Fraunces",Georgia,"Times New Roman",serif;
  --govde:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* 2. Temel ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--kagit);color:var(--metin);
  font-family:var(--govde);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
picture{display:contents}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--bas);font-weight:600;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,1.5rem + 3.9vw,4.6rem);font-weight:700}
h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,3rem)}
h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.35rem)}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
.kap{width:min(100% - var(--pay)*2,var(--kap));margin-inline:auto}
.gorunmez{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:-999px;z-index:100;background:var(--kirmizi);color:#fff;padding:.7em 1.2em;border-radius:0 0 10px 0}
.atla:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--kirmizi-ac);outline-offset:3px;border-radius:4px}
.ico{width:1.25em;height:1.25em;flex:none}

/* 3. Ortak parçalar --------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:.5em;margin:0 0 1em;
  font-size:.775rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kirmizi);
}
.kicker--ac{color:var(--altin)}
.kicker .ico{width:1.1em;height:1.1em}

.giris{font-size:clamp(1.03rem,.98rem + .3vw,1.2rem);color:var(--metin-ac);max-width:62ch}
.bolum--koyu .giris{color:rgba(255,255,255,.76)}

.dug{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.92em 1.65em;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.96rem;letter-spacing:.01em;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.dug .ico{width:1.05em;height:1.05em;transition:transform .18s ease}
.dug:hover{transform:translateY(-2px)}
.dug:hover .ico{transform:translateX(3px)}
.dug--dolu{background:var(--kirmizi);color:#fff;box-shadow:0 12px 30px -12px rgba(207,70,25,.8)}
.dug--dolu:hover{background:var(--kirmizi-ac)}
.dug--hat{border:1.5px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(4px)}
.dug--hat:hover{background:rgba(255,255,255,.12);border-color:#fff}

.bag{
  display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--kirmizi);
  text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .18s ease
}
.bag:hover{border-color:currentColor}
.bag .ico{width:1em;height:1em}
.bolum--koyu .bag{color:var(--altin)}

/* belirme (JS yoksa her şey görünür kalır). translate kullanılır ki
   kutuların hover'daki transform'u ile çakışmasın. */
html.js .bel{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .8s var(--yumusak)}
html.js .bel.gorundu{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){html.js .bel{opacity:1;translate:none}}

/* 4. Üst bar ---------------------------------------------------- */
.ust{
  position:fixed;inset:0 0 auto;z-index:50;
  transition:background-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.ust-ic{display:flex;align-items:center;gap:clamp(14px,3vw,34px);min-height:76px}
.marka{flex:none;margin-inline-end:auto;display:block}
.marka-logo{width:clamp(116px,13vw,154px);height:auto}
/* koyu zeminde logo beyaz, yaprak ve altın korunur */
.ust:not(.ust--inik) .marka-logo [fill="#231f20"]{fill:#fff}
.ust:not(.ust--inik) .marka-logo [stroke="#d0a650"]{stroke:var(--altin)}

.gez ul{display:flex;gap:clamp(14px,1.9vw,28px)}
.gez a{
  text-decoration:none;font-weight:500;font-size:.94rem;color:rgba(255,255,255,.88);
  padding:.45em 0;position:relative;white-space:nowrap;transition:color .2s ease
}
.gez a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;
  background:var(--kirmizi-ac);transform:scaleX(0);transform-origin:inline-start;transition:transform .25s ease
}
.gez a:hover::after,.gez a.is-active::after{transform:scaleX(1)}
.ust--inik .gez a{color:var(--metin)}
.ust--inik .gez a:hover,.ust--inik .gez a.is-active{color:var(--kirmizi)}

.dil{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.14)}
.dil a{
  text-decoration:none;font-size:.76rem;font-weight:600;letter-spacing:.06em;
  padding:.38em .72em;border-radius:999px;color:rgba(255,255,255,.85);transition:all .2s ease
}
.dil a.is-on{background:var(--yaprak);color:#f4ecdb}   /* seçili dil: yeşil, durak ikonlarıyla aynı */
.dil a:hover:not(.is-on){background:rgba(255,255,255,.18);color:#fff}
.ust--inik .dil{background:rgba(28,19,16,.07)}
.ust--inik .dil a{color:var(--metin-ac)}
.ust--inik .dil a.is-on{background:var(--yaprak);color:#f4ecdb}

.ust--inik{background:rgba(255,255,255,.93);backdrop-filter:saturate(1.6) blur(12px);box-shadow:0 1px 0 var(--cizgi),0 10px 30px -22px rgba(28,19,16,.5)}

.menu-dug{
  display:none;position:relative;flex:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:0;border-radius:12px;color:#fff;cursor:pointer;transition:background-color .25s ease
}
.ust--inik .menu-dug{background:rgba(28,19,16,.07);color:var(--metin)}
.menu-dug[aria-expanded="true"]{background:#f4ecdb;color:var(--yaprak)}
/* hamburger ↔ çarpı: dönerek yer değiştirir */
.menu-dug .ico{position:absolute;width:22px;height:22px;transition:opacity .25s ease,transform .4s var(--yumusak)}
.menu-dug .ico:nth-of-type(2){opacity:0;transform:rotate(-90deg) scale(.6)}
.menu-dug[aria-expanded="true"] .ico:nth-of-type(1){opacity:0;transform:rotate(90deg) scale(.6)}
.menu-dug[aria-expanded="true"] .ico:nth-of-type(2){opacity:1;transform:none}

/* mobil menü: başlıkla birleşik kart; altı yuvarlak, footer'daki degrade çizgi, gölge */
.ust.menu-acik{background:#fff;box-shadow:none}
.gez-mobil{
  position:absolute;inset:100% 0 auto;z-index:-1;
  border-bottom:3px solid transparent;border-radius:0 0 26px 26px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--kirmizi),var(--altin),var(--yaprak)) border-box;
  box-shadow:0 30px 44px -22px rgba(28,19,16,.5);
  opacity:0;translate:0 -16px;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,translate .4s var(--yumusak),visibility 0s .4s
}
.ust.menu-acik .gez-mobil{opacity:1;translate:none;visibility:visible;pointer-events:auto;transition:opacity .3s ease,translate .45s var(--yumusak),visibility 0s}
.gez-mobil ul{padding:4px calc(var(--pay) - 10px) 16px}
.gez-mobil li{opacity:0;translate:-18px 0;transition:opacity .25s ease,translate .3s var(--yumusak)}
.ust.menu-acik .gez-mobil li{opacity:1;translate:none;transition:opacity .4s ease,translate .5s var(--yumusak);transition-delay:calc(.08s + var(--i) * .055s)}
.gez-mobil a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0;padding:.85em .9em;
  border-radius:14px;text-decoration:none;font-weight:600;color:var(--metin);transition:background-color .25s ease,color .25s ease
}
.gez-mobil a .ico{width:18px;height:18px;opacity:.3;transition:transform .3s var(--yumusak),opacity .3s ease}
.gez-mobil a:hover{background:var(--krem)}
.gez-mobil a:hover .ico{opacity:.8;transform:translateX(3px)}
/* bulunduğumuz bölüm: krem zemin, yeşil yazı ve nokta */
.gez-mobil a.is-active{background:#f4ecdb;color:var(--yaprak)}
.gez-mobil a.is-active .ico{opacity:1}
.gez-mobil a span::before{
  content:"";display:inline-block;width:8px;height:8px;margin-inline-end:.65em;border-radius:50%;vertical-align:.1em;
  background:var(--yaprak);transform:scale(0);transition:transform .35s var(--yumusak)
}
.gez-mobil a.is-active span::before{transform:none}
@media (min-width:1024px){.gez-mobil{display:none}}
@media (prefers-reduced-motion:reduce){.gez-mobil,.gez-mobil li{translate:none}}

@media (max-width:1023px){
  .gez{display:none}
  .menu-dug{display:flex}
}

/* 5. Hero (slider) ---------------------------------------------- */
.hero{position:relative;min-height:clamp(560px,56.25vw,100svh);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:var(--koyu)}
.hero-sahne{position:absolute;inset:0;z-index:-2}
.hero-kare{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-kare.is-on{opacity:1}
.hero-kare img{
  width:100%;height:100%;object-fit:cover;object-position:var(--odak,50% 50%);
  transform:scale(1);transition:transform 0s 1.5s,translate .45s var(--yumusak)   /* sönünce sessizce başa sarar */
}
/* kare ekrana sığarak başlar, kaldığı sürece hafifçe büyür */
.hero-kare.is-on img{transform:scale(1.07);transition:transform 9s cubic-bezier(.3,.45,.45,1),translate .45s var(--yumusak)}
@media (max-width:700px){.hero-kare img{object-position:var(--odak-m,50% 50%)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(20,13,10,.5),rgba(20,13,10,0) 150px),
    radial-gradient(58% 76% at 8% 94%,rgba(20,13,10,.84) 0%,rgba(20,13,10,.58) 38%,rgba(20,13,10,.2) 60%,rgba(20,13,10,0) 74%);
}
.hero-ic{padding-block:clamp(130px,20vh,190px) clamp(34px,6vh,64px);color:#fff}

.hero-metinler{display:grid;max-width:min(100%,44rem)}
.hero-metin{grid-area:1/1;align-self:end;visibility:hidden;transition:visibility 0s .9s}
.hero-metin.is-on{visibility:visible;transition:translate .45s var(--yumusak)}
.hero-metin>*{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .8s var(--yumusak)}
.hero-metin.is-on>*{opacity:1;transform:none}
.hero-metin.is-on>:nth-child(1){transition-delay:.35s}
.hero-metin.is-on>:nth-child(2){transition-delay:.48s}
.hero-metin.is-on>:nth-child(3){transition-delay:.64s}
.hero .kicker{color:#f1cb86;text-shadow:0 1px 12px rgba(12,7,5,.75)}
.hero-bas,.hero-giris{text-shadow:0 2px 18px rgba(12,7,5,.45)}
.hero-bas{
  color:#fff;text-wrap:balance;margin:0 0 .38em;
  font-family:var(--bas);font-weight:700;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(2.3rem,1.4rem + 3.3vw,4rem)
}
.hero-giris{font-size:clamp(1.05rem,.98rem + .38vw,1.25rem);color:rgba(255,255,255,.88);max-width:46ch;margin:0}

.hero-alt{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px 40px;margin-top:clamp(26px,4vh,40px)}
.hero-dug{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero-kontrol{
  display:flex;align-items:flex-end;gap:clamp(6px,1vw,12px);padding:6px 10px 4px 14px;border-radius:999px;
  background:rgba(20,13,10,.38);backdrop-filter:blur(8px)
}
html:not(.js) .hero-kontrol{display:none}
.filiz-tanim{position:absolute;width:0;height:0;overflow:hidden}
.hero-nokta{
  display:grid;justify-items:center;gap:6px;padding:6px 5px;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.5);font-size:.66rem;font-weight:600;letter-spacing:.12em;transition:color .3s ease
}
.hero-nokta:hover,.hero-nokta.is-on{color:#fff}
.filiz{width:22px;height:31px;overflow:visible;transition:transform .45s var(--yumusak)}
.hero-nokta:hover .filiz{transform:translateY(-3px) rotate(-7deg)}
.hero-nokta.is-on .filiz{transform:scale(1.14)}
.filiz-hat{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4;stroke-linejoin:round;transition:stroke .3s ease}
.hero-nokta.is-on .filiz-hat,.hero-nokta.is-dolu .filiz-hat{stroke:rgba(255,236,190,.95)}
.filiz-damar{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.1;stroke-linecap:round}
/* dolgu: alttan yükselir, yeşilden altına döner; geçilenler altın kalır */
.filiz-dolgu{fill:var(--yaprak-ac);transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.hero-nokta.is-dolu .filiz-dolgu{transform:none;fill:var(--altin)}
.hero-nokta.is-on .filiz-dolgu{animation:filizDol 7s linear forwards}
.hero.is-bekle .hero-nokta.is-on .filiz-dolgu{animation-play-state:paused}
@keyframes filizDol{0%{transform:scaleY(0);fill:#5f9a2a}55%{fill:#93b446}100%{transform:none;fill:var(--altin)}}
/* duruş: boş filizin ucu hafif sağa eğik; doldukça doğrulur, dolunca küçük bir esnemeyle dik oturur */
.filiz-govde{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(16deg);transition:transform .6s var(--yumusak)}
.hero-nokta.is-dolu .filiz-govde{transform:none}
.hero-nokta.is-on .filiz-govde{animation:filizDogrul 7s linear forwards}
.hero.is-bekle .hero-nokta.is-on .filiz-govde{animation-play-state:paused}
html.js .hero:not(.gorsel-hazir) .filiz-govde{animation:none}
@keyframes filizDogrul{0%{transform:rotate(16deg)}90%{transform:rotate(1.5deg)}95%{transform:rotate(-3deg)}100%{transform:none}}
.hero-durdur{
  flex:none;width:38px;height:38px;margin-inline-start:6px;margin-bottom:12px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;
  transition:background-color .2s ease,border-color .2s ease
}
.hero-durdur:hover{background:rgba(255,255,255,.18);border-color:#fff}
.hero-durdur .ico{width:16px;height:16px}
.hero-durdur .ico:nth-of-type(2){display:none}
.hero.is-durdu .hero-durdur .ico:nth-of-type(1){display:none}
.hero.is-durdu .hero-durdur .ico:nth-of-type(2){display:block}

/* ilk açılış: ilk kare de diğerleri gibi geçişle gelir. Yazılar hemen (.hazir),
   fotoğraf yüklenince (.gorsel-hazir) — yavaş bağlantıda yazı fotoğrafı beklemesin */
html.js .hero:not(.gorsel-hazir) .hero-kare.is-on{opacity:0}
html.js .hero:not(.gorsel-hazir) .hero-kare.is-on img{transform:scale(1)}
html.js .hero:not(.hazir) .hero-metin>*{opacity:0;transform:translateY(22px)}
html.js .hero:not(.gorsel-hazir) .filiz-dolgu{animation:none}
.hero-alt{transition:opacity .8s ease .85s,translate .9s var(--yumusak) .85s}
html.js .hero:not(.hazir) .hero-alt{opacity:0;translate:0 18px}

/* sürükle-bırak / parmakla kaydırma */
.hero{touch-action:pan-y;cursor:grab}
.hero a,.hero button{cursor:pointer}
.hero.is-surukle{cursor:grabbing;user-select:none}
.hero img{-webkit-user-drag:none;user-select:none}
.hero.is-surukle .hero-kare.is-on img{translate:calc(var(--surukle,0px) * .12) 0;transition:transform 9s cubic-bezier(.3,.45,.45,1)}
.hero.is-surukle .hero-metin.is-on{translate:calc(var(--surukle,0px) * .3) 0;transition:none}

/* mobil: yatay fotoğraf dikey ekrana yayılıp ürünü kesmesin diye üstte bant,
   yazılar altındaki koyu zeminde */
@media (max-width:700px){
  .hero{--bant:min(46svh,410px);display:block;min-height:0}
  .hero-sahne{bottom:auto;height:var(--bant)}
  .hero::after{
    background:linear-gradient(to bottom,rgba(20,13,10,.6) 0,rgba(20,13,10,0) 110px,rgba(20,13,10,0) calc(var(--bant) - 170px),rgba(20,13,10,.85) calc(var(--bant) - 40px),var(--koyu) var(--bant))
  }
  .hero-ic{padding-block:calc(var(--bant) - 84px) 40px}
  .hero-alt{flex-direction:column;align-items:flex-start}
  .hero-dug{gap:10px}
  .hero-dug .dug{padding:.85em 1.2em;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-kare img,.hero-kare.is-on img{transform:none;transition:none}
  .hero-nokta.is-on .filiz-dolgu{animation:none;transform:none;fill:var(--altin)}
  .hero-nokta.is-on .filiz-govde{animation:none;transform:none}
  .hero-durdur{display:none}
}

/* 6. Pekoe ------------------------------------------------------ */
.bolum--pekoe{background:linear-gradient(180deg,var(--ada),#e9eed9);overflow:hidden}
.pekoe{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media (min-width:920px){.pekoe{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}}
.pekoe-sahne{margin:0}
.pekoe-cizim{width:100%;max-width:520px;height:auto;margin-inline:auto;overflow:visible}
.pekoe-tanim{
  font-family:var(--bas);font-size:clamp(1.12rem,1rem + .55vw,1.42rem);line-height:1.5;color:var(--metin);
  border-inline-start:3px solid var(--kirmizi);padding-inline-start:1em;margin-bottom:1.7em
}
.pekoe-adimlar{display:grid;gap:8px;margin-bottom:1.6em}
.pekoe-adim{
  display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:16px;cursor:default;
  border:1px solid transparent;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s var(--yumusak)
}
html.js .pekoe-adim.bel{transition:opacity .7s ease,translate .8s var(--yumusak),background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s var(--yumusak)}
.pekoe-adim:hover,.pekoe-adim:focus-visible,.pekoe-adim.is-on{
  background:#fff;border-color:rgba(78,126,40,.22);box-shadow:0 18px 36px -26px rgba(42,60,20,.45);transform:translateX(6px)
}
.pekoe-adim:focus-visible{outline-offset:2px}
.pekoe-adim-no{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.92rem;background:rgba(78,126,40,.14);color:var(--yaprak);transition:background-color .3s ease,color .3s ease
}
.pekoe-adim:hover .pekoe-adim-no,.pekoe-adim.is-on .pekoe-adim-no{background:var(--yaprak);color:#fff}
.pekoe-adim[data-parca="olgun"] .pekoe-adim-no{background:rgba(58,44,37,.08);color:var(--metin-ac)}
.pekoe-adim[data-parca="olgun"]:hover .pekoe-adim-no,.pekoe-adim[data-parca="olgun"].is-on .pekoe-adim-no{background:var(--metin-ac);color:#fff}
.pekoe-adim h3{font-size:1.1rem;margin:.18em 0 .3em}
.pekoe-adim p{margin:0;font-size:.95rem;color:var(--metin-ac)}
.pekoe-ipucu{display:flex;justify-content:center;align-items:center;gap:.5em;margin-top:.6em;font-size:.85rem;color:var(--metin-ac)}
.pekoe-ipucu .ico{color:var(--yaprak-ac);width:1.1em;height:1.1em}
html.js .pekoe-ipucu .ico{animation:salla 1.4s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){html.js .pekoe-ipucu .ico{animation:none}}
.pekoe-not{display:flex;gap:.7em;align-items:flex-start;margin:0;font-weight:500;color:var(--yaprak)}
.pekoe-not .ico{margin-top:.15em}

/* — çizim — */
.p-halka{fill:none;stroke:rgba(78,126,40,.28);stroke-width:1.4;stroke-dasharray:.003 .011;stroke-linecap:round}
.p-sap{fill:none;stroke:#5c7c2c;stroke-width:6.5;stroke-linecap:round}
.p-aya{stroke:rgba(30,50,15,.28);stroke-width:1}
.p-renk-1{fill:#a9cd5c}
.p-renk-2{fill:#87b345}
.p-renk-3{fill:#57872d}
.p-renk-4{fill:#447324}
.p-golge{fill:rgba(20,40,8,.16)}
.p-damar{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.6;stroke-linecap:round}
.p-yan{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1;stroke-linecap:round}
.p-tom{stroke:rgba(60,90,20,.32);stroke-width:1}
.p-tom-damar{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-linecap:round}
.p-tuy path{stroke:#fff;stroke-width:1.5;stroke-linecap:round}
.p-hale{fill:rgba(207,70,25,.06);stroke:var(--kirmizi);stroke-width:1.8;stroke-dasharray:3 7;stroke-linecap:round}
.p-cizgi{stroke:var(--kirmizi);stroke-width:1.5}
.p-hap{fill:var(--kirmizi)}
.p-hap-yazi{fill:#fff;font-family:var(--govde);font-size:13px;font-weight:700;letter-spacing:.2em}
.p-etiket path{fill:none;stroke:rgba(58,44,37,.38);stroke-width:1}
.p-etiket circle{fill:var(--kirmizi)}
.p-etiket text{fill:var(--metin);font-family:var(--govde);font-size:15px;font-weight:600}
.p-etiket--olgun circle{fill:var(--metin-ac)}
.p-etiket--olgun text{fill:var(--metin-ac)}
.p-aya,.p-parca,.p-etiket,.p-pekoe{transition:filter .4s ease,opacity .4s ease}
/* dokunulabilir parçalar */
.p-parca{cursor:pointer;outline:none}
.p-ic{transform-box:fill-box;transform-origin:0 50%}
.p-tomurcuk .p-ic{transform-origin:50% 100%}
.p-parca:focus-visible .p-aya,.p-parca:focus-visible .p-tom{stroke:var(--kirmizi);stroke-width:2.5}
.p-parca.is-secili .p-aya,.p-parca.is-secili .p-tom{stroke:rgba(30,50,15,.55);stroke-width:1.6}
.pekoe-cizim.bitti .p-parca.kipir .p-ic{animation:kipir .7s cubic-bezier(.3,.7,.4,1)}
.pekoe-cizim.bitti .p-tomurcuk.kipir .p-ic{animation-name:kipirTom}
@keyframes kipir{0%{transform:rotate(0)}30%{transform:rotate(9deg) scale(1.05)}62%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes kipirTom{0%{transform:scale(1)}35%{transform:scale(1.12) rotate(5deg)}65%{transform:scale(.97) rotate(-3deg)}100%{transform:scale(1)}}
.pekoe-cizim.canli .p-olgun .p-aya{filter:saturate(.35) brightness(1.18);transition:filter 1s ease 2.6s}

/* üzerine gelinen adımın parçası öne çıkar */
.pekoe-cizim[data-vurgu] .p-parca{opacity:.22}
.pekoe-cizim[data-vurgu] .p-etiket,.pekoe-cizim[data-vurgu] .p-pekoe{filter:opacity(.25)}
.pekoe-cizim[data-vurgu="tomurcuk"] .p-tomurcuk,
.pekoe-cizim[data-vurgu="genc"] .p-genc,
.pekoe-cizim[data-vurgu="olgun"] .p-olgun{opacity:1}
.pekoe-cizim[data-vurgu="tomurcuk"] .p-etiket--tomurcuk,
.pekoe-cizim[data-vurgu="genc"] .p-etiket--genc,
.pekoe-cizim[data-vurgu="olgun"] .p-etiket--olgun,
.pekoe-cizim[data-vurgu="tomurcuk"] .p-pekoe,
.pekoe-cizim[data-vurgu="genc"] .p-pekoe{filter:none}
.pekoe-cizim[data-vurgu="olgun"] .p-olgun .p-aya{filter:none}

/* açılış: dal çizilir, yapraklar alttan üste açılır, en son tomurcuk ve Pekoe halesi */
@media (prefers-reduced-motion:no-preference){
  html.js .pekoe-cizim .p-sap{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.2,1) .1s}
  html.js .pekoe-cizim .p-ic{transform:scale(0);transform-box:fill-box;transform-origin:0 50%;transition:transform .95s cubic-bezier(.2,.9,.3,1.18)}
  html.js .pekoe-cizim .p-tomurcuk .p-ic{transform-origin:50% 100%}
  html.js .pekoe-cizim .p-pekoe,html.js .pekoe-cizim .p-etiket{opacity:0;transition:opacity .7s ease,filter .4s ease}
  html.js .pekoe-cizim .p-hale{transform:scale(.82);transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.2,.8,.3,1.12) 1.9s}

  html.js .pekoe-cizim.canli .p-sap{stroke-dashoffset:0}
  html.js .pekoe-cizim.canli .p-ic,html.js .pekoe-cizim.canli .p-hale{transform:none}
  html.js .pekoe-cizim.canli .p-pekoe,html.js .pekoe-cizim.canli .p-etiket{opacity:1}
  html.js .pekoe-cizim .p-filiz>:nth-child(2) .p-ic{transition-delay:.55s}
  html.js .pekoe-cizim .p-filiz>:nth-child(3) .p-ic{transition-delay:.8s}
  html.js .pekoe-cizim .p-filiz>:nth-child(4) .p-ic{transition-delay:1.1s}
  html.js .pekoe-cizim .p-filiz>:nth-child(5) .p-ic{transition-delay:1.3s}
  html.js .pekoe-cizim .p-filiz>:nth-child(6) .p-ic{transition-delay:1.55s}
  html.js .pekoe-cizim.canli .p-pekoe{transition-delay:1.9s,0s}
  html.js .pekoe-cizim.canli>g:nth-of-type(3){transition-delay:2.3s,0s}
  html.js .pekoe-cizim.canli>g:nth-of-type(4){transition-delay:2.45s,0s}
  html.js .pekoe-cizim.canli>g:nth-of-type(5){transition-delay:2.6s,0s}
  html.js .pekoe-cizim.canli>g:nth-of-type(6){transition-delay:2.75s,0s}
  /* açılış bitince (morad.js .bitti ekler) gecikmeler kalkar; hover anında tepki verir */
  html.js .pekoe-cizim.bitti,html.js .pekoe-cizim.bitti *{transition-delay:0s!important}

  /* sonra: filiz hafifçe salınır, tomurcuk tüyleri parlar, hale akar */
  .pekoe-cizim .p-filiz{transform-origin:228px 560px}
  .pekoe-cizim.canli .p-filiz{animation:salin 7s ease-in-out 3.2s infinite}
  .pekoe-cizim.canli .p-tuy{animation:parla 2.4s ease-in-out 2.4s infinite alternate}
  .pekoe-cizim.canli .p-hale{animation:yuru 22s linear 2.8s infinite}
}
@keyframes salin{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.8deg)}}
@keyframes parla{from{opacity:.2}to{opacity:1}}
@keyframes yuru{to{stroke-dashoffset:-200}}

/* hata sayfası (404 / 410) */
.hata{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,760px);display:flex;align-items:center;background:var(--koyu);color:#fff}
.hata::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,19,16,.88),rgba(28,19,16,.7) 50%,rgba(28,19,16,.94))}
.hata-ic{padding-block:clamp(130px,18vh,180px) clamp(60px,10vh,100px);max-width:46rem}
.hata h1{color:#fff;font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem)}
.hata .giris{color:rgba(255,255,255,.8);margin-bottom:2em}
.hata-kod{margin:0 0 .1em;font-family:var(--bas);font-weight:700;font-size:clamp(5rem,3rem + 9vw,10rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(208,166,80,.6)}
.hata-dug{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* 7. Bölüm kabuğu ----------------------------------------------- */
.bolum{padding-block:var(--bosluk);position:relative}
.bolum--krem{background:var(--krem)}
.bolum--koyu{background:var(--koyu);color:#fff;isolation:isolate;overflow:hidden}
.bolum--koyu h2,.bolum--koyu h3{color:#fff}
.bolum-zemin{position:absolute;inset:0;z-index:-2}
.bolum-zemin img{width:100%;height:100%;object-fit:cover;opacity:.75}
.bolum--koyu::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(28,19,16,.9),rgba(28,19,16,.72) 50%,rgba(28,19,16,.92))
}
.bolum-bas{max-width:70ch;margin-bottom:clamp(34px,5vw,58px)}
.bolum-bas--orta{margin-inline:auto;text-align:center}
.bolum-bas--orta .giris{margin-inline:auto}

/* 8. Hikâye + ilkeler ------------------------------------------- */
.ikili{display:grid;gap:clamp(34px,5vw,72px);align-items:center}
@media (min-width:900px){.ikili{grid-template-columns:1fr 1fr}}
.ikili-metin h2{margin-bottom:.6em}
.sayilar{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,46px);margin-top:2.2em}
.sayilar li{display:flex;flex-direction:column}
.sayilar strong{font-family:var(--bas);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);font-weight:700;color:var(--kirmizi);line-height:1}
.sayilar span{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--metin-ac);margin-top:.45em}
/* fotoğraf kutusunun dışına hiçbir şey taşmaz */
.ikili-foto{position:relative;margin:0;aspect-ratio:6/5;border-radius:calc(var(--yuvarla) + 6px);overflow:hidden;box-shadow:var(--golge-buyuk)}
.ikili-foto img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;transition:transform 1.4s var(--yumusak)}
.ikili-foto:hover img{transform:scale(1.04)}
.ikili-rozet{
  position:absolute;inset-inline-start:18px;inset-block-end:18px;display:inline-flex;align-items:center;gap:.55em;
  padding:.7em 1.15em;border-radius:999px;background:rgba(28,19,16,.6);backdrop-filter:blur(8px);
  color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase
}
.ikili-rozet .ico{color:var(--altin);width:1.1em;height:1.1em}

.ilkeler{margin-top:var(--bosluk)}
.ilke-kartlar{display:grid;gap:clamp(18px,2.6vw,28px)}
@media (min-width:860px){.ilke-kartlar{grid-template-columns:1.12fr 1fr}}
.ilke-kart{
  position:relative;overflow:hidden;isolation:isolate;padding:clamp(26px,3.6vw,44px);
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:calc(var(--yuvarla) + 6px);
  transition:transform .45s var(--yumusak),box-shadow .45s ease,border-color .45s ease
}
html.js .ilke-kart.bel{transition:opacity .7s ease,translate .8s var(--yumusak),transform .45s var(--yumusak),box-shadow .45s ease,border-color .45s ease}
.ilke-kart::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--kirmizi),var(--altin));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--yumusak)
}
.ilke-kart:hover{transform:translateY(-6px);box-shadow:var(--golge-buyuk);border-color:rgba(207,70,25,.24)}
.ilke-kart:hover::before{transform:scaleX(1)}
.ilke-kart--mission{background:linear-gradient(160deg,rgba(42,29,23,.55),rgba(42,29,23,.92) 70%),var(--koyu-2) url(../img/desen-yaprak.svg) 0 0/180px;color:#fff;border-color:transparent}
.ilke-kart--mission h3{color:#fff}
.ilke-bas{display:flex;align-items:center;gap:14px;margin-bottom:1.3em}
.ilke-bas h3{margin:0;font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem)}
.ilke-ikon{
  flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:rgba(207,70,25,.1);color:var(--kirmizi);transition:transform .5s var(--yumusak)
}
.ilke-ikon .ico{width:25px;height:25px}
.ilke-kart:hover .ilke-ikon{transform:rotate(-8deg) scale(1.08)}
.ilke-kart--mission .ilke-ikon{background:rgba(208,166,80,.16);color:var(--altin)}
.ilke-liste li{
  display:flex;gap:16px;align-items:baseline;padding:.85em 0;border-top:1px solid var(--cizgi);
  transition:transform .3s var(--yumusak),color .3s ease
}
.ilke-liste li:hover{transform:translateX(6px);color:var(--kirmizi)}
.ilke-no{flex:none;min-width:1.9em;font-family:var(--bas);font-weight:700;font-size:.95rem;color:var(--kirmizi)}
.ilke-kart--mission .ilke-liste li{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.86)}
.ilke-kart--mission .ilke-liste li:hover{color:var(--altin)}
.ilke-kart--mission .ilke-no{color:var(--altin)}

/* 9. Ürünler ---------------------------------------------------- */
.urunler{display:grid;gap:clamp(22px,3vw,34px)}
@media (min-width:760px){.urunler{grid-template-columns:repeat(2,1fr)}}
.urun{
  display:flex;flex-direction:column;overflow:hidden;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:calc(var(--yuvarla) + 8px);
  transition:transform .45s var(--yumusak),box-shadow .45s ease
}
html.js .urun.bel{transition:opacity .7s ease,translate .8s var(--yumusak),transform .45s var(--yumusak),box-shadow .45s ease}
.urun:hover{transform:translateY(-6px);box-shadow:var(--golge-buyuk)}
/* sahne: paket her zaman kutunun içinde, iki boy aynı zemine basar */
.urun-sahne{
  position:relative;isolation:isolate;height:clamp(300px,34vw,410px);
  display:flex;align-items:flex-end;justify-content:center;padding:52px 24px 36px;
  background:radial-gradient(58% 52% at 50% 60%,rgba(255,255,255,.85),transparent 72%),linear-gradient(165deg,#f8e6d2,#efcfae)
}
.urun--pekoe-400 .urun-sahne{background:radial-gradient(58% 52% at 50% 60%,rgba(255,255,255,.85),transparent 72%),linear-gradient(165deg,#eff3e1,#dbe6c2)}
.urun-sahne::after{
  content:"";position:absolute;z-index:0;left:50%;bottom:28px;width:54%;height:24px;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(28,19,16,.34),transparent);transition:transform .5s var(--yumusak),opacity .5s ease
}
.urun-paket{
  position:relative;z-index:1;height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(28,19,16,.22));transition:transform .55s var(--yumusak)
}
.urun--pekoe-400 .urun-paket{height:78%}
.urun:hover .urun-paket{transform:translateY(-10px) rotate(-2deg)}
.urun:hover .urun-sahne::after{transform:scale(.82);opacity:.65}
.urun-boy{
  position:absolute;z-index:0;inset-inline-end:22px;top:16px;font-family:var(--bas);font-weight:700;
  font-size:clamp(2.2rem,1.7rem + 1.6vw,3.3rem);line-height:1;letter-spacing:-.02em;color:rgba(255,255,255,.75)
}
.rozet{
  position:absolute;top:18px;inset-inline-start:18px;z-index:2;
  background:var(--kirmizi);color:#fff;font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.45em .9em;border-radius:999px
}
.urun-govde{padding:clamp(22px,3vw,34px)}
.urun-net{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--metin-ac);margin-bottom:.5em}
.urun-net strong{color:var(--kirmizi);font-size:1.05rem;letter-spacing:0}
.urun-govde h3{margin-bottom:.15em}
.urun-etiket{font-size:.9rem;color:var(--yaprak);font-weight:600;margin-bottom:.9em}
.urun-ozellik{display:grid;gap:.5em;margin-top:1.1em}
.urun-ozellik li{display:flex;gap:.6em;align-items:flex-start;font-size:.93rem;color:var(--metin-ac)}
.urun-ozellik .ico{color:var(--yaprak-ac);margin-top:.18em}
.urun-not{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1em;
  margin:clamp(28px,4vw,46px) 0 0;color:var(--metin-ac)
}

/* 10. Kalite: akan duraklar -------------------------------------
   Ray ikonların içinden geçer (kartların üstünde, arkada kalmaz). Girişte ray çizilir,
   duraklar sırayla gelir; sonra ışık duraktan durağa akar, vardığı durak yanar (morad.js). */
.akis{--p:clamp(22px,2.4vw,30px);--ik:48px;--ara:18px;position:relative;display:grid;gap:22px;padding-inline-start:calc(var(--ik) + var(--ara))}
.akis-ray{
  position:absolute;pointer-events:none;border-radius:2px;
  inset-block:calc(var(--p) + var(--ik) / 2) 40px;inset-inline-start:calc(var(--ik) / 2 - 1px);width:2px;
  background:linear-gradient(180deg,var(--altin),rgba(208,166,80,.55) 85%,rgba(208,166,80,0))
}
.akis-damla{
  position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff4d2;box-shadow:0 0 0 4px rgba(208,166,80,.3),0 0 24px 8px rgba(255,214,140,.7);
  opacity:0;transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .4s ease
}
.akis-damla.is-on{opacity:1}
.akis-damla.atla{transition:none}
.akis-damla.soner{transition:transform 1.25s cubic-bezier(.45,0,.55,1),opacity .9s ease .3s}
.adim{
  position:relative;padding:var(--p);border-radius:var(--yuvarla);
  background:rgba(20,13,10,.5);border:1px solid rgba(208,166,80,.2);
  transition:opacity .7s ease var(--gec,0s),translate .9s var(--yumusak) var(--gec,0s),
             transform .5s var(--yumusak),background-color .5s ease,border-color .5s ease,box-shadow .5s ease
}
.adim::before{   /* ikondan karta kısa bağ */
  content:"";position:absolute;top:calc(var(--p) + var(--ik) / 2 - 1px);inset-inline-start:calc(-1 * var(--ara));
  width:var(--ara);height:2px;background:rgba(208,166,80,.5)
}
.adim::after{
  content:"";position:absolute;inset-inline:var(--p);bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--yaprak-ac),var(--altin));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--yumusak)
}
.adim:hover,.adim.is-sirada{background:rgba(255,255,255,.09);border-color:rgba(208,166,80,.55);box-shadow:0 30px 50px -28px rgba(0,0,0,.75)}
.adim:hover{transform:translateY(-6px)}
.adim:hover::after,.adim.is-sirada::after{transform:scaleX(1)}
.adim-ikon{
  position:absolute;z-index:1;top:var(--p);inset-inline-start:calc(-1 * (var(--ik) + var(--ara)));
  width:var(--ik);height:var(--ik);border-radius:50%;display:grid;place-items:center;
  background:#f4ecdb;color:var(--yaprak);border:2px solid rgba(208,166,80,.75);
  box-shadow:0 0 0 5px rgba(28,19,16,.55),0 10px 24px -8px rgba(0,0,0,.6);
  transition:scale .65s cubic-bezier(.3,1.6,.5,1) var(--gec-ik,0s),transform .5s var(--yumusak),background-color .4s ease,color .4s ease
}
.adim-ikon .ico{width:22px;height:22px;overflow:visible}
.adim:hover .adim-ikon,.adim.is-sirada .adim-ikon{background:var(--yaprak);color:#f4ecdb;transform:scale(1.1)}
.adim.is-sirada .adim-ikon::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(143,180,67,.8);animation:halka 1.6s ease-out infinite
}
@keyframes halka{from{transform:scale(.85);opacity:1}to{transform:scale(1.45);opacity:0}}
.adim-no{
  position:absolute;top:14px;inset-inline-end:var(--p);font-family:var(--bas);font-size:2.6rem;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.24);transition:-webkit-text-stroke-color .4s ease,transform .5s var(--yumusak)
}
.adim:hover .adim-no,.adim.is-sirada .adim-no{-webkit-text-stroke-color:var(--altin);transform:translateY(-3px)}
.adim-yer{display:inline-flex;align-items:center;gap:.4em;margin:0 0 .55em;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--altin)}
.adim-yer .ico{width:1.05em;height:1.05em}
.adim h3{margin-bottom:.4em}
.adim-metin{margin:0;font-size:.95rem;color:rgba(255,255,255,.74)}
/* ikonlara küçük hareketler */
.adim--leaf:hover .ico,.adim--leaf.is-sirada .ico{animation:salla .9s ease-in-out infinite alternate}
.adim--cup:hover .ico path:last-child,.adim--cup.is-sirada .ico path:last-child{animation:buhar 1.1s ease-in-out infinite}
.adim--shield:hover .ico path:last-child,.adim--shield.is-sirada .ico path:last-child{stroke-dasharray:12;animation:tik .8s ease forwards}
.adim--store:hover .ico,.adim--store.is-sirada .ico{animation:hopla .8s ease-in-out infinite}
@keyframes salla{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes buhar{0%{transform:translateY(1px);opacity:1}100%{transform:translateY(-3px);opacity:.15}}
@keyframes tik{from{stroke-dashoffset:12}to{stroke-dashoffset:0}}
@keyframes hopla{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* geniş ekran: ikonlar kartların üstünde tek sıra, ray yatay */
@media (min-width:1000px){
  .akis{--ik:58px;--ara:24px;grid-template-columns:repeat(4,1fr);padding-inline-start:0;padding-top:calc(var(--ik) + var(--ara))}
  .akis-ray{
    inset-block:calc(var(--ik) / 2 - 1px) auto;inset-inline:calc(var(--p) + var(--ik) / 2) 0;width:auto;height:2px;
    background:linear-gradient(90deg,var(--altin),rgba(208,166,80,.55) 88%,rgba(208,166,80,0))
  }
  .adim::before{top:calc(-1 * var(--ara));inset-inline-start:calc(var(--p) + var(--ik) / 2 - 1px);width:2px;height:var(--ara)}
  .adim-ikon{top:calc(-1 * (var(--ik) + var(--ara)));inset-inline-start:var(--p)}
  .adim-ikon .ico{width:25px;height:25px}
}

/* giriş: ray çizilir, ikonlar sırayla belirir, kartlar arkasından gelir */
@media (prefers-reduced-motion:no-preference){
  html.js .akis-ray{transform:scaleY(0);transform-origin:top;transition:transform 2s cubic-bezier(.45,0,.2,1) .1s}
  html.js .akis .adim{opacity:0;translate:0 40px}
  html.js .akis .adim-ikon{scale:0}
  html.js .akis.canli .akis-ray{transform:none}
  html.js .akis.canli .adim{opacity:1;translate:none;--gec:calc(.45s + var(--sira) * .5s);--gec-ik:calc(.2s + var(--sira) * .5s)}
  html.js .akis.canli .adim-ikon{scale:1}
  @media (min-width:1000px){
    html.js .akis-ray{transform:scaleX(0);transform-origin:left}
  }
}

/* 11. Galeri ----------------------------------------------------
   Kareler fotoğrafın kendi oranında (16:9) — paketler kesilmez. Tıklayınca büyür (morad.js §9). */
.galeri{
  display:grid;gap:clamp(8px,1.2vw,14px);grid-template-columns:repeat(2,1fr);
  width:min(100% - var(--pay) * 2,1480px);margin-inline:auto
}
@media (min-width:1000px){.galeri{grid-template-columns:repeat(4,1fr)}}
.galeri-kare{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;cursor:zoom-in;
  border-radius:14px;background:var(--koyu-2);box-shadow:var(--golge)
}
.galeri-kare:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.galeri-kare img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--yumusak)}
.galeri-kare::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,13,10,.5),transparent 55%);opacity:0;transition:opacity .4s ease
}
.galeri-kare:hover img{transform:scale(1.05)}
.galeri-kare:hover::after,.galeri-kare:focus-visible::after{opacity:1}
.galeri-yazi{   /* slogan: üzerine gelince alttan kayar */
  position:absolute;z-index:1;inset-inline:14px 60px;bottom:12px;
  font-family:var(--bas);font-size:clamp(.92rem,.8rem + .3vw,1.05rem);font-weight:600;line-height:1.25;color:#fff;
  text-shadow:0 1px 12px rgba(12,7,5,.7);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--yumusak)
}
.galeri-kare:first-child .galeri-yazi{font-size:clamp(1.1rem,.9rem + .8vw,1.6rem);inset-inline:22px 70px;bottom:20px}
.galeri-kare:hover .galeri-yazi,.galeri-kare:focus-visible .galeri-yazi{opacity:1;transform:none}
@media (hover:none){.galeri-yazi{display:none}}
.galeri-ikon{
  position:absolute;z-index:1;inset-inline-end:12px;bottom:12px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--koyu);
  opacity:0;transform:translateY(8px) scale(.9);transition:opacity .35s ease,transform .45s var(--yumusak)
}
.galeri-ikon .ico{width:18px;height:18px}
.galeri-kare:hover .galeri-ikon,.galeri-kare:focus-visible .galeri-ikon{opacity:1;transform:none}

/* büyütme kutusu */
html.buyut-acik{overflow:hidden}
.buyut{
  position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(8px,2vw,24px);padding:clamp(60px,8vh,84px) clamp(10px,2.5vw,32px) clamp(20px,4vh,44px);
  background:rgba(20,13,10,.94);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease;touch-action:pan-y
}
.buyut[hidden]{display:none}
.buyut.is-acik{opacity:1}
.buyut-sahne{margin:0;display:grid;justify-items:center;gap:12px;min-width:0}
.buyut-img{
  display:block;max-width:100%;max-height:calc(100svh - 180px);width:auto;height:auto;border-radius:14px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);opacity:0;transform:scale(.97);
  transition:opacity .35s ease,transform .5s var(--yumusak);user-select:none;-webkit-user-drag:none
}
.buyut.is-yuklendi .buyut-img{opacity:1;transform:none}
.buyut-yazi{display:flex;justify-content:space-between;align-items:baseline;gap:1em;width:100%;color:#fff;font-family:var(--bas);font-size:clamp(1rem,.9rem + .5vw,1.3rem)}
.buyut-sayac{flex:none;color:var(--altin);font-family:var(--govde);font-size:.85rem;font-weight:600;letter-spacing:.08em}
.buyut-dug{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;transition:background-color .2s ease,transform .2s ease
}
.buyut-dug:hover{background:rgba(255,255,255,.22)}
.buyut-dug .ico{width:20px;height:20px}
.buyut-onceki .ico{transform:rotate(180deg)}
.buyut-onceki:hover{transform:translateX(-2px)}
.buyut-sonraki:hover{transform:translateX(2px)}
.buyut-kapat{position:absolute;top:clamp(10px,2vh,20px);inset-inline-end:clamp(10px,2.5vw,32px)}
@media (max-width:700px){
  .buyut{grid-template-columns:minmax(0,1fr);padding-inline:10px;padding-bottom:84px}
  .buyut-onceki,.buyut-sonraki{position:absolute;bottom:20px}
  .buyut-onceki{inset-inline-start:calc(50% - 60px)}
  .buyut-sonraki{inset-inline-end:calc(50% - 60px)}
}

/* 12. Başa dön: çay bardağı — kaydırdıkça bardak dolar, halka ilerlemeyi gösterir */
.yukari{
  position:fixed;z-index:40;inset-inline-end:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  width:58px;height:58px;border-radius:50%;display:block;color:var(--altin);
  background:rgba(28,19,16,.82);backdrop-filter:blur(8px);box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  opacity:0;scale:.6;pointer-events:none;transition:opacity .35s ease,scale .45s var(--yumusak),transform .3s var(--yumusak)
}
.yukari.is-gorunur{opacity:1;scale:1;pointer-events:auto}
.yukari:hover{transform:translateY(-4px)}
.yukari-svg{width:100%;height:100%;overflow:visible}
.yukari-iz{fill:none;stroke:rgba(208,166,80,.2);stroke-width:2.5}
.yukari-halka{fill:none;stroke:var(--altin);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:32px 32px}
.yukari-cay{fill:#c0581f;transform:translateY(24px)}
.yukari-cam{fill:rgba(255,255,255,.08);stroke:#f4ecdb;stroke-width:1.6;stroke-linejoin:round}
.yukari-tabak{stroke:#f4ecdb;stroke-width:2;stroke-linecap:round}
.yukari-buhar{fill:none;stroke:#f4ecdb;stroke-width:1.4;stroke-linecap:round;opacity:0}
.yukari-bardak{transition:transform .4s var(--yumusak);transform-origin:32px 50px}
.yukari:hover .yukari-bardak{transform:translateY(-3px)}
@media (prefers-reduced-motion:no-preference){
  .yukari.is-gorunur .yukari-buhar{animation:buharYukari 2.6s ease-in-out infinite}
  .yukari.is-gorunur .yukari-buhar--2{animation-delay:1.3s}
  .yukari:hover .yukari-buhar{animation-duration:1.3s}
}
@keyframes buharYukari{0%{opacity:0;transform:translateY(3px)}35%{opacity:.9}100%{opacity:0;transform:translateY(-5px)}}

/* 13. Alt bilgi (iletişim burada, #iletisim) ----------------------- */
.alt{
  position:relative;overflow:hidden;isolation:isolate;color:rgba(255,255,255,.7);
  background:var(--koyu-2);padding-block:clamp(52px,6vw,78px) 0;
  border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--kirmizi),var(--altin),var(--yaprak)) 1
}
.alt-zemin{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.alt-desen{position:absolute;inset:-180px;background:url(../img/desen-yaprak.svg) 0 0/180px;animation:desenKay 80s linear infinite}
.alt-zemin::after{content:"";position:absolute;inset:0;background:radial-gradient(85% 95% at 50% 100%,rgba(42,29,23,.2) 25%,rgba(42,29,23,.92) 100%)}
.alt-isik{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.16}
.alt-isik--1{top:-34vmax;left:-22vmax;background:radial-gradient(circle,var(--altin),transparent 60%);animation:isikSuz 18s ease-in-out infinite alternate}
.alt-isik--2{bottom:-38vmax;right:-24vmax;background:radial-gradient(circle,var(--yaprak-ac),transparent 60%);animation:isikSuz 22s ease-in-out infinite alternate-reverse}
@keyframes desenKay{to{transform:translate(180px,180px)}}
@keyframes isikSuz{to{transform:translate(6vmax,4vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.alt-desen,.alt-isik{animation:none}}

/* dar: tek sütun · orta: marka üstte, Keşfet ile İletişim yan yana · geniş: üç sütun */
.alt-ic{display:grid;gap:clamp(30px,4vw,56px) clamp(24px,4vw,56px)}
@media (min-width:600px){.alt-ic{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.alt-marka{grid-column:1/-1}}
@media (min-width:1000px){.alt-ic{grid-template-columns:1.5fr .8fr 1.2fr}.alt-marka{grid-column:auto}}
.alt-logo{width:156px;height:auto;margin-bottom:1em}
.alt-logo [fill="#231f20"]{fill:#fff}
.alt-slogan{font-family:var(--bas);font-size:1.08rem;color:#fff;margin-bottom:.3em}
.alt-tag{font-size:.88rem;margin:0}
/* Haliloğlu logosu: alt şeridin sağında, çerçevesiz; cümle title'da */
.alt-haliloglu{display:block;flex:none;color:rgba(243,234,216,.82);transition:color .25s ease,transform .3s var(--yumusak)}
.alt-haliloglu:hover{color:#fff;transform:translateY(-2px)}
.alt-haliloglu-logo{width:62px;height:auto}
.alt-baslik{margin:0 0 1.1em;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--altin)}
.alt-menu li+li{margin-top:.6em}
@media (max-width:599px){.alt-menu ul{display:grid;grid-template-columns:1fr 1fr;gap:.6em 1em}.alt-menu li+li{margin-top:0}}
.alt-menu a,.alt-iletisim a{text-decoration:none;font-size:.92rem;transition:color .2s ease}
.alt-menu a:hover,.alt-iletisim a:hover{color:#fff}
.alt-iletisim{display:grid;gap:.85em}
.alt-iletisim li{display:flex;gap:.65em;align-items:flex-start;line-height:1.5}
.alt-iletisim .ico{color:var(--altin);width:1.05em;height:1.05em;margin-top:.2em}
.alt-sosyal{display:flex;gap:10px;margin-top:1.3em}
.alt-sosyal a{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;transition:background-color .2s ease}
.alt-sosyal a:hover{background:var(--kirmizi)}
.alt-son{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8em 1.5em;justify-content:space-between;
  margin-top:clamp(36px,5vw,56px);padding-block:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem
}
.alt-son p{margin:0}