/*
 * v2 (31 Ekim 2026): şablon havasını azaltan düzen — Fraunces başlık, Instrument Sans gövde,
 * Caveat el yazısı notlar, logodaki parmak izi kalbinden filigran, kartsız ürünler, lacivert
 * "Nasıl çalışır + güven" bandı (zikzak adımlar), tek büyük alıntılı yorum bandı, liste blog.
 * yeni.css'ten sonra yüklenir ve onun üzerine yazar; masaüstü ayarları en alttaki medya sorgusunda.
 */
:root{
  --oo-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --oo-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --oo-el:'Caveat','Segoe Print',cursive;
  --oo-karamel-koyu:#9a6d43; --oo-kum:#f2e8dc;
  --font-display:var(--oo-serif);
}
body{font-size:15px}
h1,h2,h3,h4{font-weight:600}
.oo-el{font-family:var(--oo-el);font-weight:600;color:var(--oo-karamel-koyu);line-height:1}
.oo-kalp{position:absolute;pointer-events:none;background:currentColor;-webkit-mask:url(../img/kalp.png) center/contain no-repeat;mask:url(../img/kalp.png) center/contain no-repeat}

/* Slider paneli */
.oo-panel{position:relative;overflow:hidden;padding:16px}
.oo-panel .oo-kalp{color:rgba(255,255,255,.07);width:150px;height:150px;right:-30px;top:-40px}
.oo-panel-metin{position:relative;gap:2px}
.oo-panel-el{color:#e8cfb2;font-size:20px;text-transform:lowercase}
.oo-panel-baslik{font-size:19px;font-weight:600}
.oo-cta{position:relative;box-shadow:none;border:0;font-weight:600}

/* Kategoriler */
.oo-kategoriler{padding:28px 0 8px}
.oo-giris{margin:0 16px;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.01em;text-align:left}
.oo-giris em{font-style:italic;color:var(--oo-bordo)}
.oo-giris-not{margin:6px 16px 6px;display:flex;align-items:flex-start;gap:6px}
.oo-giris-not .oo-el{font-size:22px;padding-top:2px}
.oo-giris-not .oo-ok{color:var(--oo-karamel);flex:0 0 auto;margin-top:8px}
.oo-kat-serit{gap:16px;padding-top:6px}
.oo-kat{width:78px}
/* Instagram hikâyesi gibi dönen halka: bordo → karamel renk geçişli çember görselin etrafında döner. */
.oo-kat-halka{width:74px;height:74px;position:relative;border:0;padding:4px;background:var(--oo-zemin)}
.oo-kat-halka::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,#820e1d,#c9996a,#f0d9b8,#c9996a,#820e1d);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));animation:oo-don 3s linear infinite}
@keyframes oo-don{to{transform:rotate(360deg)}}
.oo-kat span:last-child{font-size:12.5px}

/* Lacivert bant: nasıl çalışır + güven */
.oo-bant{margin-top:32px;background:var(--oo-lacivert);color:#e9e6f2;padding:30px 20px 0;position:relative;overflow:hidden}
.oo-bant .oo-kalp{color:rgba(201,153,106,.09);width:260px;height:260px;right:-70px;top:-50px}
.oo-bant-ic{position:relative}
.oo-bant h2{margin:0;font-size:28px;color:#fff}
.oo-bant .oo-el{color:var(--oo-karamel);font-size:21px;display:block;margin:4px 0 22px}
.oo-bant .oo-adimlar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.oo-bant .oo-adimlar::before{display:none}
.oo-bant .oo-adim{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start;max-width:84%}
.oo-bant .oo-adim.oo-sag{margin-left:auto;grid-template-columns:1fr 48px;text-align:right}
.oo-bant .oo-adim.oo-sag .oo-adim-no{order:2}
.oo-bant .oo-adim-no{border:0;background:none;width:auto;height:auto;font-family:var(--oo-serif);font-size:48px;line-height:.9;font-weight:500;color:var(--oo-karamel);display:block}
.oo-bant .oo-adimlar b{display:block;font-size:16px;font-weight:600;color:#fff;margin:0 0 3px}
.oo-bant .oo-adimlar p{margin:0;font-size:14px;line-height:1.5;color:#c9c6dc;max-width:none}
.oo-bant .oo-ok-gecis{display:flex;justify-content:center;color:var(--oo-karamel);height:64px;margin:2px 0}
.oo-bant .oo-ok-gecis svg{width:190px;height:64px}
.oo-bant .oo-ok-gecis.oo-ters svg{transform:scaleX(-1)}
.oo-bant-cta{margin:26px 0 0 auto;width:max-content;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--oo-karamel);color:var(--oo-lacivert);font-family:var(--oo-sans);font-weight:600;font-size:15px;cursor:pointer}
.oo-bant .oo-guven{margin:28px -20px 0;border-radius:0;background:transparent;border-top:1px solid rgba(232,207,178,.18)}

/* Bölüm başlıkları */
.oo-bolum{padding:36px 16px 8px}
.oo-bolum-bas{align-items:flex-end;gap:12px;padding:0 0 16px}
.oo-bolum-bas h2{font-size:26px;line-height:1.1}
.oo-bolum-bas .oo-el{font-size:20px;display:block;margin-top:2px}
.oo-bolum-bas a{font-size:14px;white-space:nowrap;padding-bottom:2px}

/* Ürün kartları — çerçevesiz */
.oo-urun-grid{padding:0;gap:22px 14px}
.oo-urun{background:none;border:0;border-radius:0;overflow:visible}
.oo-urun-gorsel{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.oo-urun-gorsel img{transition:transform .4s}
.oo-urun:hover .oo-urun-gorsel img{transform:scale(1.03)}
.oo-urun-etiket{position:absolute;left:8px;top:8px;background:var(--oo-zemin);color:var(--oo-bordo);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.oo-urun-ic{padding:10px 0 0;gap:4px}
.oo-urun-kat{display:none}
.oo-urun-ad{font-family:var(--oo-serif);font-size:16px;font-weight:500;line-height:1.25}
.oo-incele{display:none}
.oo-urun-alt{padding-top:2px}

/* Yorum bandı */
.oo-yorum-bant{margin-top:36px;background:var(--oo-kum);padding:34px 20px 26px;position:relative;overflow:hidden;text-align:center}
.oo-yorum-bant .oo-kalp{color:rgba(130,14,29,.06);width:220px;height:220px;left:50%;top:10px;transform:translateX(-50%)}
.oo-yorum-bant>.oo-el{font-size:22px;position:relative}
.oo-alinti-serit{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px -20px 0;position:relative}
.oo-alinti{flex:0 0 100%;scroll-snap-align:center;padding:0 24px;margin:0}
.oo-alinti q{display:block;font-family:var(--oo-serif);font-style:italic;font-size:23px;line-height:1.35;font-weight:500;quotes:"\201C" "\201D";text-wrap:balance}
.oo-alinti figcaption{margin-top:14px;font-size:13.5px;font-weight:600}
.oo-alinti figcaption span{display:block;font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--oo-karamel-koyu);margin-top:2px}
.oo-noktalar{display:flex;justify-content:center;gap:6px;margin-top:18px;position:relative}
.oo-noktalar button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#d6c3b0;cursor:pointer;transition:width .2s}
.oo-noktalar button.oo-aktif{background:var(--oo-bordo);width:22px;border-radius:4px}
.oo-pazar-satir{margin:18px 0 0;position:relative;font-size:13px;color:var(--oo-soluk)}
.oo-pazar-satir a{color:var(--oo-lacivert);font-weight:600}

/* Banner + blog */
.oo-banner{margin-top:36px}
.oo-banner-ic b{font-weight:600;font-size:24px}
.oo-blog{padding:36px 16px 0}
.oo-blog-grid{grid-template-columns:1fr;gap:16px}
.oo-blog-kart{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.oo-blog-kart img{width:96px;height:96px;aspect-ratio:auto;border-radius:12px}
.oo-blog-kart small{display:block;margin-bottom:4px;color:var(--oo-karamel-koyu)}
.oo-blog-kart b{font-family:var(--oo-serif);font-weight:500;font-size:16.5px;line-height:1.3}
.oo-seo{margin-top:36px}

/* Footer */
.oo-alt-bilgi{position:relative;overflow:hidden}
.oo-alt-bilgi .oo-kalp{color:rgba(255,255,255,.04);width:300px;height:300px;right:-90px;bottom:-80px}
.oo-ab-ic,.oo-ab-telif{position:relative}
.oo-ab-marka .oo-el{color:var(--oo-karamel);font-size:24px}

@media (min-width:960px){
  .oo-panel{gap:28px;padding:56px}
  .oo-panel .oo-kalp{width:360px;height:360px;right:-80px;top:auto;bottom:-90px}
  .oo-panel-el{font-size:28px}
  .oo-panel-baslik{font-size:46px;line-height:1.08}
  .oo-kategoriler{padding-top:64px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px}
  .oo-giris{font-size:48px;margin:0}
  .oo-giris-not{margin:10px 0 0}
  .oo-giris-not .oo-el{font-size:28px}
  .oo-giris-not .oo-ok{width:70px;height:62px;transform:rotate(-90deg) scaleX(-1);margin-top:0}
  .oo-kat-serit{gap:28px}
  .oo-kat{width:120px}
  .oo-kat-halka{width:112px;height:112px;padding:6px}
  .oo-sayfa>.oo-bant,.oo-sayfa>.oo-yorum-bant{width:auto;max-width:none}
  .oo-bant{margin-top:64px;padding:56px 0 0}
  .oo-bant-ic{width:calc(100% - 64px);max-width:1200px;margin:0 auto}
  .oo-bant .oo-kalp{width:520px;height:520px;right:-120px;top:-120px}
  .oo-bant h2{font-size:42px}
  .oo-bant .oo-el{font-size:28px;margin-bottom:36px}
  .oo-bant .oo-adimlar{flex-direction:row;align-items:flex-start}
  .oo-bant .oo-adim{flex:1 1 0;max-width:none;grid-template-columns:64px 1fr}
  .oo-bant .oo-adim.oo-sag{margin-left:0;margin-top:90px;grid-template-columns:64px 1fr;text-align:left}
  .oo-bant .oo-adim.oo-sag .oo-adim-no{order:0}
  .oo-bant .oo-ok-gecis{flex:0 0 130px;height:auto;margin:30px 0 0}
  .oo-bant .oo-ok-gecis svg{width:130px;height:90px}
  .oo-bant .oo-ok-gecis.oo-ters svg{transform:scaleY(-1)}
  .oo-bant .oo-adim-no{font-size:64px}
  .oo-bant .oo-adimlar b{font-size:18px}
  .oo-bant .oo-guven{margin:48px 0 0}
  .oo-bolum{padding:72px 0 0}
  .oo-bolum-bas h2{font-size:40px}
  .oo-bolum-bas .oo-el{font-size:26px}
  .oo-urun-grid{gap:24px}
  .oo-urun-ad{font-size:19px}
  .oo-yorum-bant{margin-top:72px;padding:64px 0 48px}
  .oo-yorum-bant .oo-kalp{width:420px;height:420px}
  .oo-alinti{padding:0 15%}
  .oo-alinti q{font-size:36px}
  .oo-banner{margin-top:72px}
  .oo-banner-ic b{font-size:40px}
  .oo-blog{padding:72px 0 0}
  .oo-blog-grid{grid-template-columns:repeat(2,1fr);gap:24px 40px}
  .oo-blog-kart{grid-template-columns:140px 1fr}
  .oo-blog-kart img{width:140px;height:140px}
  .oo-blog-kart b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.oo-urun-gorsel img,.oo-noktalar button{transition:none}.oo-kat-halka::before{animation:none}}