/* Cewşen · tanıtım sitesi
   Tipografi: slogan ve başlıklar Playfair Display İtalik 400, düz metin Inter Light 300.
   Ölçü birimi: rem (16 px). Dikey ritim 8 px tabanlı. */

/* ---------- Yazı tipleri (Türkçe alt küme, OFL) ---------- */
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;
  src:url("../fonts/playfair-italic.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("../fonts/playfair.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/inter-300.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-400.woff2") format("woff2")}

/* ---------- Renkler ve ölçüler ---------- */
:root{
  --gece:#0B2126; --teal:#214241; --krem:#F1ECE5; --kum:#DFD5C5;
  --adacayi:#858D7A; --altin:#BC9359; --slogan:#C8B48E;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Tip ölçeği: akışkan, 375 px ile 1440 px arasında */
  --t-baslik:clamp(2.25rem,1.6rem + 2.4vw,4rem);      /* 36 → 64 px */
  --t-acilis:clamp(1.125rem,1rem + .45vw,1.375rem);   /* 18 → 22 px */
  --t-soru:clamp(1.1875rem,1.05rem + .5vw,1.4375rem); /* 19 → 23 px */
  --t-govde:clamp(1rem,.95rem + .22vw,1.125rem);      /* 16 → 18 px */
  --t-not:clamp(.875rem,.84rem + .12vw,.9375rem);     /* 14 → 15 px */
  --t-etiket:.75rem;                                  /* 12 px */

  --kenar:clamp(1.5rem,6vw,6.5rem);
  --metin-genislik:min(32rem,36vw);
}

/* ---------- Temel ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--gece)}
body{
  font-family:var(--sans);font-weight:300;font-size:var(--t-govde);line-height:1.55;color:var(--kum);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-kerning:normal;font-feature-settings:"kern","liga","calt";font-synthesis:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:1px solid var(--altin);outline-offset:4px;border-radius:2px}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Sahneler ---------- */
.sahne{position:fixed;inset:0;z-index:3;opacity:0;visibility:hidden}
.sahne.aktif{opacity:1;visibility:visible}
.sahne .zemin{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:50% 46%;will-change:transform,opacity,filter;transition:opacity .52s ease}
.sahne.videolu .zemin{opacity:0}
.zemin.aninda{transition:none!important}
.perde{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s ease}
.sahne.yazi .perde{opacity:1}
.perde.sol{background:linear-gradient(90deg,rgba(11,33,38,.88) 0%,rgba(11,33,38,.62) 32%,rgba(11,33,38,.18) 50%,rgba(11,33,38,0) 62%)}
.perde.sag{background:linear-gradient(270deg,rgba(11,33,38,.9) 0%,rgba(11,33,38,.68) 34%,rgba(11,33,38,.2) 52%,rgba(11,33,38,0) 64%)}

.yol{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;z-index:2;transition:opacity .52s ease;background:var(--gece)}
.yol.gorun{opacity:1}

/* ---------- Metin bloğu ---------- */
.metin{position:absolute;top:50%;width:var(--metin-genislik);transform:translateY(-50%);
  text-shadow:0 1px 2px rgba(11,33,38,.35),0 2px 22px rgba(11,33,38,.6)}
.metin.sol{left:var(--kenar)}
.metin.sag{right:calc(var(--kenar) - 1.5rem)}
.metin > *{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.sahne.yazi .metin > *{opacity:1;transform:none;transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sahne.yazi .metin > :nth-child(2){transition-delay:.22s}
.sahne.yazi .metin > :nth-child(3){transition-delay:.5s}
.sahne.yazi .metin > :nth-child(4){transition-delay:.78s}
.sahne.yazi .metin > :nth-child(5){transition-delay:1.02s}

/* Üst etiket: Inter 400, büyük harf, geniş aralık. 12 px'de Light fazla incelir. */
.etiket{display:flex;align-items:center;gap:.875rem;margin-bottom:1.5rem;
  font-weight:400;font-size:var(--t-etiket);line-height:1;letter-spacing:.28em;text-transform:uppercase;color:var(--altin)}
.etiket::before{content:"";flex:none;width:2.25rem;height:1px;background:currentColor;opacity:.85}

/* Başlık: Playfair İtalik. Sıkı satır, hafif negatif aralık, dengeli bölme. */
.baslik{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:var(--t-baslik);line-height:1.08;letter-spacing:-.012em;color:var(--slogan);
  font-feature-settings:"kern","liga","lnum";text-wrap:balance;margin-bottom:1.375rem}

/* Gövde: Inter Light. 1.55 satır aralığı, satır uzunluğu 42-46 karakter. */
.govde{max-width:44ch;font-size:var(--t-govde);line-height:1.55;letter-spacing:.003em;color:var(--kum);text-wrap:pretty;
  hanging-punctuation:first}
.govde + .govde{margin-top:.875em}
.not{max-width:44ch;margin-top:1.125rem;font-size:var(--t-not);line-height:1.5;letter-spacing:.006em;color:rgba(223,213,197,.78);text-wrap:pretty}
.soru{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t-soru);line-height:1.3;letter-spacing:-.004em;
  color:var(--altin);margin:-.375rem 0 1.125rem;text-wrap:balance}

/* ---------- Açılış ---------- */
.acilis .zemin{filter:brightness(.52) saturate(.9)}
.acilis-icerik{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--kenar)}
.acilis-icerik > *{opacity:0;transform:scale(.975);transition:opacity .35s ease,transform .35s ease}
.sahne.yazi .acilis-icerik > *{opacity:1;transform:none;transition:opacity 1.8s ease,transform 2.4s cubic-bezier(.2,.7,.2,1)}
.sahne.yazi .acilis-icerik > :nth-child(2){transition-delay:.9s}
.acilis-logo{width:min(27.5rem,70vw);height:auto;filter:drop-shadow(0 4px 30px rgba(11,33,38,.6))}
.acilis-alt{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:var(--t-acilis);line-height:1.3;letter-spacing:.01em;color:rgba(241,236,229,.9)}

/* ---------- Sırdaş denemesi ---------- */
.secenek{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.75rem}
.secenek button{cursor:pointer;padding:.6875rem 1.25rem;border-radius:999px;border:1px solid rgba(188,147,89,.62);background:rgba(11,33,38,.32);
  font-weight:300;font-size:.875rem;line-height:1;letter-spacing:.02em;color:var(--krem);transition:background .4s,color .4s,border-color .4s,opacity .4s}
.secenek button:hover{background:rgba(188,147,89,.16)}
.secenek button[aria-pressed="true"]{background:var(--altin);border-color:var(--altin);color:var(--gece);font-weight:400}
.secenek.secildi button[aria-pressed="false"]{opacity:.42}
.cevap{max-width:44ch;min-height:8.25rem;margin-top:1.5rem;font-size:var(--t-govde);line-height:1.55;color:var(--krem);opacity:0;transition:opacity .9s ease;text-wrap:pretty}
.cevap.gorun{opacity:1}

/* ---------- Nefes ---------- */
.nefes{display:flex;align-items:center;gap:1.5rem;margin:.25rem 0 .5rem}
.halka{flex:none;width:4.75rem;height:4.75rem;border-radius:50%;border:1px solid var(--altin);box-shadow:0 0 30px rgba(188,147,89,.32),inset 0 0 24px rgba(188,147,89,.14);transform:scale(.6)}
.halka-yazi{min-width:7rem;font-family:var(--serif);font-style:italic;font-size:1.625rem;line-height:1;color:var(--krem)}

/* ---------- Son durak ---------- */
.son-perde{background:radial-gradient(ellipse 62% 46% at 50% 22%,rgba(11,33,38,.38),rgba(11,33,38,0) 70%),linear-gradient(0deg,rgba(11,33,38,.7) 0%,rgba(11,33,38,0) 16%)}
.son{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6vh var(--kenar);text-align:center}
.son-ust > *,.telefon{opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease}
.sahne.yazi .son-ust > *,.sahne.yazi .telefon{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.sahne.yazi .son-ust > :nth-child(2){transition-delay:.3s}
.sahne.yazi .son-ust > :nth-child(3){transition-delay:.6s}
.sahne.yazi .son-ust > :nth-child(4){transition-delay:.9s}
.sahne.yazi .telefon{transition-delay:1.1s}
.son-ust{display:flex;flex-direction:column;align-items:center}
.son .etiket{justify-content:center;color:var(--kum);margin-bottom:1.375rem}
.son-logo{width:min(16.25rem,56vw);height:auto;filter:drop-shadow(0 2px 18px rgba(11,33,38,.5))}
.son-slogan{margin-top:.5rem;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.125rem,1rem + .5vw,1.4375rem);line-height:1.3;letter-spacing:.004em;
  color:var(--krem);text-shadow:0 1px 14px rgba(11,33,38,.75),0 0 3px rgba(11,33,38,.4)}
.magaza{display:flex;gap:.75rem;margin-top:1.875rem;justify-content:center;flex-wrap:wrap}
.magaza a{display:block;border-radius:9px;transition:transform .3s,filter .3s}
.magaza a:hover{transform:translateY(-2px);filter:brightness(1.12)}
.magaza img{height:2.875rem;width:auto}
.telefon{position:relative;flex:0 1 min(50vh,29.5rem);min-height:0;width:100%;margin-top:2.125rem;filter:drop-shadow(0 26px 50px rgba(11,33,38,.45))}
.telefon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.2s ease}
.telefon img.on{opacity:1}

.altbilgi{position:absolute;left:0;right:0;bottom:1.25rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem 1.25rem;
  font-weight:300;font-size:.75rem;line-height:1.4;letter-spacing:.04em;color:var(--krem);opacity:0;transition:opacity 1s ease 1.4s;text-shadow:0 1px 2px rgba(11,33,38,.6),0 1px 12px rgba(11,33,38,.8)}
.sahne.yazi .altbilgi{opacity:.85}
.altbilgi a{text-decoration:none}
.altbilgi a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Arayüz ---------- */
.noktalar{position:fixed;right:1.625rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.875rem;z-index:10}
.noktalar button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--kum);opacity:.35;cursor:pointer;transition:opacity .4s,transform .4s,background .4s}
.noktalar button[aria-current="step"]{opacity:1;background:var(--altin);transform:scale(1.6)}
.indir-baglanti{font-weight:300;font-size:.75rem;letter-spacing:.06em;text-decoration:none;color:var(--kum);opacity:.55;transition:opacity .3s;text-shadow:0 1px 10px rgba(11,33,38,.8)}
.indir-baglanti:hover{opacity:1}
.ipucu{position:fixed;left:0;right:0;bottom:1.75rem;z-index:10;text-align:center;white-space:nowrap;padding-left:.3em;text-shadow:0 1px 2px rgba(11,33,38,.9),0 0 14px rgba(11,33,38,.9);color:var(--krem)!important;font-weight:400;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--kum);opacity:.7;transition:opacity .8s;pointer-events:none}
.ipucu span{display:inline}
.ipucu::after{content:"";display:block;width:1px;height:2.125rem;margin:.625rem auto 0;background:linear-gradient(var(--altin),transparent);animation:ak 2.2s ease-in-out infinite}
@keyframes ak{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Telefon ve tablet: 1024 px ve altı ---------- */
@media (max-width:1024px){
  :root{
    --t-baslik:clamp(2rem,1.4rem + 3vw,2.875rem);  /* 32 → 46 px */
    --t-govde:1rem;
    --t-not:.875rem;
    --kenar:1.5rem;
  }
  .metin,.metin.sol,.metin.sag{left:var(--kenar);right:var(--kenar);top:auto;bottom:calc(max(3vh,1.25rem) + 4.25rem);width:auto;max-width:36rem;transform:none}
  .perde.sol,.perde.sag{background:linear-gradient(0deg,rgba(11,33,38,.95) 0%,rgba(11,33,38,.78) 34%,rgba(11,33,38,.42) 54%,rgba(11,33,38,0) 70%)}
  .etiket{margin-bottom:1.125rem;font-size:.6875rem;letter-spacing:.26em}
  .etiket::before{width:1.75rem}
  .baslik{line-height:1.1;margin-bottom:1rem}
  .govde,.not,.cevap{max-width:none}
  .secenek{gap:.5rem;margin-top:1.25rem}
  .secenek button{padding:.625rem 1rem;font-size:.8125rem}
  .cevap{min-height:7.25rem;margin-top:1.125rem;font-size:.9375rem}
  .halka{width:4rem;height:4rem}
  .noktalar{right:.75rem;gap:.75rem}
  .ust-araclar{top:.75rem;right:.875rem;gap:.875rem}
  .ipucu{bottom:.75rem;font-size:.625rem;line-height:1.7}
  .ipucu span{display:block}
  .ipucu::after{height:1.375rem;margin-top:.375rem}
  .son{justify-content:flex-start;height:100%;padding:max(2.25vh,.875rem) var(--kenar) max(.875rem,env(safe-area-inset-bottom))}
  .son .etiket{margin-bottom:.625rem}
  .son-logo{width:min(13.5rem,52vw)}
  .son-slogan{margin-top:.125rem;font-size:1.0625rem}
  .son-perde{background:radial-gradient(ellipse 80% 40% at 50% 18%,rgba(11,33,38,.34),rgba(11,33,38,0) 70%),
    linear-gradient(0deg,rgba(11,33,38,.92) 0%,rgba(11,33,38,.7) 9%,rgba(11,33,38,.25) 20%,rgba(11,33,38,0) 30%)}
  .sahne.yazi .altbilgi{opacity:.92}
  .son-slogan{max-width:17em;text-wrap:balance}
  .magaza{margin-top:.875rem}
  .magaza img{height:2.375rem}
  .telefon{flex:1 1 0;margin-top:1rem;margin-bottom:.25rem}
  .altbilgi{position:static;flex:none;margin-top:.75rem;font-size:.6875rem;gap:.125rem .875rem}
}

/* ---------- Hareketi azalt ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* ---------- Üst araçlar ---------- */
.ust-araclar{position:fixed;top:1.125rem;right:1.375rem;z-index:12;display:flex;align-items:center;gap:1.125rem;transition:right .7s cubic-bezier(.2,.7,.2,1)}
.og-dugme{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem .5rem 1rem;border-radius:999px;cursor:pointer;
  background:rgba(11,33,38,.62);border:1px solid rgba(188,147,89,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-weight:400;font-size:.8125rem;line-height:1;letter-spacing:.04em;color:var(--krem);box-shadow:0 6px 24px rgba(11,33,38,.35);
  transition:background .3s,border-color .3s,transform .3s}
.og-dugme:hover{background:rgba(11,33,38,.8);border-color:var(--altin);transform:translateY(-1px)}
.og-anahtar{position:relative;flex:none;width:2.125rem;height:1.25rem;border-radius:999px;border:1px solid rgba(188,147,89,.75);background:rgba(241,236,229,.08);transition:background .3s,border-color .3s}
.og-anahtar::after{content:"";position:absolute;top:2px;left:2px;width:.875rem;height:.875rem;border-radius:50%;background:var(--altin);transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.og-dugme[aria-pressed="true"] .og-anahtar{background:var(--altin);border-color:var(--altin)}
.og-dugme[aria-pressed="true"] .og-anahtar::after{transform:translateX(.875rem);background:var(--krem)}
/* Ses düğmesi */
.ses-dugme{flex:none;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(11,33,38,.62);border:1px solid rgba(188,147,89,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(11,33,38,.35);transition:background .3s,border-color .3s,transform .3s}
.ses-dugme:hover{background:rgba(11,33,38,.8);border-color:var(--altin);transform:translateY(-1px)}
.ses-dugme svg{width:1.125rem;height:1.125rem;fill:none;stroke:var(--krem);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ses-dugme svg path:first-child{fill:rgba(241,236,229,.18)}
.ses-dugme .dalga{stroke:var(--altin)}
.ses-dugme .ses-kapali{display:none}
.ses-dugme[aria-pressed="false"] .ses-acik{display:none}
.ses-dugme[aria-pressed="false"] .ses-kapali{display:block}
.ses-dugme[aria-pressed="false"] .dalga{stroke:var(--kum)}
.ses-dugme.bekliyor{animation:ses-nabiz 2s ease-in-out infinite}
@keyframes ses-nabiz{0%,100%{box-shadow:0 6px 24px rgba(11,33,38,.35),0 0 0 0 rgba(188,147,89,.5)}50%{box-shadow:0 6px 24px rgba(11,33,38,.35),0 0 0 7px rgba(188,147,89,0)}}
/* İlk açılışta dikkat çeksin diye iki kez hafif bir ışık halkası */
.og-dugme{animation:og-isik 2.4s ease-out 3.5s 2 both}
@keyframes og-isik{0%{box-shadow:0 6px 24px rgba(11,33,38,.35),0 0 0 0 rgba(188,147,89,.55)}70%{box-shadow:0 6px 24px rgba(11,33,38,.35),0 0 0 12px rgba(188,147,89,0)}100%{box-shadow:0 6px 24px rgba(11,33,38,.35),0 0 0 0 rgba(188,147,89,0)}}

/* ---------- Nasıl çalışır? modu ---------- */
:root{--og-genislik:min(46vw,40rem);--og-pay:.75rem}
.sahne,.yol{transition:right .7s cubic-bezier(.2,.7,.2,1),bottom .7s cubic-bezier(.2,.7,.2,1)}
.sahne .zemin{transition:opacity .52s ease,background-position .7s cubic-bezier(.2,.7,.2,1)}
.yol{transition:opacity .52s ease,right .7s cubic-bezier(.2,.7,.2,1),bottom .7s cubic-bezier(.2,.7,.2,1),width .7s cubic-bezier(.2,.7,.2,1),height .7s cubic-bezier(.2,.7,.2,1),object-position .7s cubic-bezier(.2,.7,.2,1)}
.ogren .sahne,.ogren .yol{right:calc(var(--og-genislik) + var(--og-pay))}
/* Video bir 'replaced' öğe: genişliği ve yüksekliği ayrıca daraltılmazsa panelin altında kalır */
.ogren .yol{width:calc(100% - var(--og-genislik) - var(--og-pay))}
/* Daralan sahnede objenin olduğu taraf görünsün */
.ogren .sahne[data-odak="sag"] .zemin{background-position:right center}
.ogren .sahne[data-odak="sol"] .zemin{background-position:left center}
.ogren .yol[data-odak="sag"]{object-position:right center}
.ogren .yol[data-odak="sol"]{object-position:left center}
.ogren .metin,.ogren .ipucu{opacity:0!important;pointer-events:none}
.ogren .noktalar{right:calc(var(--og-genislik) + var(--og-pay) + 1.25rem)}
.ogren .ust-araclar{right:calc(var(--og-genislik) + var(--og-pay) + 1.25rem);top:1.5rem}
.ogren .ust-araclar .indir-baglanti{display:none}
.ogren .og-dugme{animation:none}

/* Panel: kenarlardan içeride, yuvarlak köşeli, içinde ince altın çizgi; düğmeye bakan küçük bir çentik */
.og-panel{position:fixed;top:var(--og-pay);right:var(--og-pay);bottom:var(--og-pay);width:var(--og-genislik);z-index:11;
  display:flex;flex-direction:column;background:var(--krem);color:var(--teal);border-radius:1.375rem;
  transform:translateX(calc(100% + 2rem));transition:transform .7s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 30px 80px rgba(11,33,38,.45),0 0 0 1px rgba(188,147,89,.35)}
.og-panel::before{content:"";position:absolute;inset:.625rem;border:1px solid rgba(188,147,89,.55);border-radius:.875rem;pointer-events:none}
.og-panel::after{content:"";position:absolute;top:1.85rem;left:-.5rem;width:1rem;height:1rem;background:var(--krem);transform:rotate(45deg);
  border-left:1px solid rgba(188,147,89,.35);border-bottom:1px solid rgba(188,147,89,.35);border-radius:0 0 0 3px}
.ogren .og-panel{transform:none}
.og-kapat{position:absolute;top:1.375rem;right:1.5rem;z-index:2;width:2.25rem;height:2.25rem;border:0;background:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--teal);opacity:.55}
.og-kapat:hover{opacity:1}
.og-ic{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:minmax(0,1fr) 11.5rem;gap:2rem;align-items:center;padding:4rem 3rem 1.5rem;opacity:0;transition:opacity .35s ease}
.og-ic.gorun{opacity:1}
.og-gez{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 2.25rem;padding:1.125rem .25rem .5rem;border-top:1px solid rgba(33,66,65,.14)}
.og-gez button{display:flex;align-items:center;gap:.375rem;padding:.625rem 1.125rem;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:400;font-size:.8125rem;letter-spacing:.03em;border:1px solid #b88c4f;color:#7a5726;
  background:linear-gradient(180deg,rgba(255,250,240,.9),rgba(241,230,210,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(122,87,38,.15);transition:filter .3s,opacity .3s,transform .3s}
.og-gez button span{font-size:1.125rem;line-height:.8}
.og-gez .og-sonraki{color:#2a1d0c;border-color:#9c733b;text-shadow:0 1px 0 rgba(255,240,210,.5);
  background:linear-gradient(160deg,#f1dcae 0%,#d6b273 28%,#bc9359 52%,#a77c42 76%,#d9b678 100%);
  box-shadow:inset 0 1px 0 rgba(255,246,222,.85),inset 0 -1px 0 rgba(110,76,30,.35),0 4px 14px rgba(140,100,45,.28)}
.og-gez button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.og-gez button:disabled{opacity:.3;cursor:default}
.og-sayac{font-weight:400;font-size:.75rem;letter-spacing:.2em;color:var(--adacayi);font-feature-settings:"tnum","lnum"}
.og-ipucu{flex:none;margin:0 2.25rem 1.625rem;text-align:center;font-weight:300;font-size:.75rem;line-height:1.5;color:var(--adacayi)}
.og-ipucu b{font-weight:400;color:var(--teal)}
.og-etiket{display:flex;align-items:center;gap:.875rem;margin-bottom:1.125rem;font-weight:400;font-size:.75rem;line-height:1;letter-spacing:.28em;text-transform:uppercase;color:var(--altin)}
.og-etiket::before{content:"";width:2.25rem;height:1px;background:currentColor}
.og-baslik{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.75rem,1.3rem + 1.2vw,2.5rem);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin-bottom:1.75rem;color:var(--teal)}
.og-adim{list-style:none;counter-reset:og;margin:0;padding:0}
.og-adim li{counter-increment:og;position:relative;padding-left:2.625rem;margin-bottom:1.125rem;font-weight:300;font-size:1rem;line-height:1.55;text-wrap:pretty}
.og-adim li::before{content:counter(og);position:absolute;left:0;top:.05em;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--altin);
  display:flex;align-items:center;justify-content:center;font-weight:400;font-size:.75rem;line-height:1;color:var(--altin);font-feature-settings:"tnum","lnum"}
.og-adim b{font-weight:400}
.og-not{margin-top:1.5rem;padding:.875rem 1.125rem;border-left:2px solid var(--altin);background:rgba(188,147,89,.1);font-weight:300;font-size:.875rem;line-height:1.55;text-wrap:pretty}
.og-tel{position:relative;width:100%;aspect-ratio:445/900;filter:drop-shadow(0 18px 36px rgba(11,33,38,.22))}
.og-tel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}
.og-tel img.on{opacity:1}
.og-bos{border:1px dashed rgba(33,66,65,.35);border-radius:1.75rem;display:flex;align-items:center;justify-content:center;filter:none;text-align:center;padding:1rem}
.og-bos span{font-weight:400;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--adacayi)}

@media (max-width:1024px){
  :root{--og-yukseklik:64vh}
  .ogren .sahne,.ogren .yol{right:0;bottom:var(--og-yukseklik)}
  .ogren .yol{width:100%;height:calc(100% - var(--og-yukseklik))}
  .ogren .sahne .zemin{background-position:center 58%!important}
  .ogren .yol{object-position:center 58%!important}
  .ogren .noktalar{right:.75rem;top:calc((100vh - var(--og-yukseklik)) / 2)}
  .ogren .ust-araclar{right:.875rem;top:.75rem}
  .og-panel{top:auto;left:.5rem;right:.5rem;bottom:.5rem;width:auto;height:calc(var(--og-yukseklik) - .5rem);transform:translateY(calc(100% + 1rem));border-radius:1.25rem}
  .og-panel::before{inset:.4375rem;border-radius:.875rem}
  .og-panel::after{display:none}
  .og-gez{margin:0 1.25rem;padding:.75rem 0 .25rem}
  .og-gez button{padding:.5rem .875rem;font-size:.75rem}
  .og-ipucu{margin:0 1.25rem 1rem;font-size:.6875rem}
  .og-kapat{top:.875rem;right:1rem}
  .og-ic{grid-template-columns:minmax(0,1fr) 6.5rem;gap:1.125rem;align-items:start;padding:2.25rem 1.5rem 1rem}
  .og-baslik{font-size:1.5rem;margin-bottom:1rem}
  .og-etiket{margin-bottom:.75rem;font-size:.6875rem}
  .og-adim li{font-size:.875rem;line-height:1.5;padding-left:2.125rem;margin-bottom:.75rem}
  .og-adim li::before{width:1.5rem;height:1.5rem;font-size:.6875rem}
  .og-not{font-size:.8125rem;margin-top:1rem}
  .og-tel{margin-top:3.25rem}
  .og-dugme{font-size:.75rem;padding:.4375rem .5rem .4375rem .875rem}
  .ses-dugme{width:2rem;height:2rem}
}
@media (max-width:420px){
  .og-ic{grid-template-columns:minmax(0,1fr) 5.25rem;gap:.875rem;padding:2rem 1.25rem 1.75rem}
  .og-tel{margin-top:2.75rem}
}
@media (max-width:340px){
  .og-ic{grid-template-columns:1fr}
  .og-tel{display:none}
}