/* ============================================================
   SİTE TEMASI — "Raf ve Mutfak"
   Soyyiğit pazarlama biriminin onayladığı giriş tasarımının (giris-a)
   renk ve biçim dili tüm sayfalara buradan yayılır. marka.css ve
   site.css'ten sonra yüklenir; yerleşim ve ızgara değişmez, yalnızca
   renk, köşe, gölge ve düğme dili değişir.
   Marka sayfalarında alt marka temaları (.t-aysan vb.) kendi --mc
   rengini korur.
   ============================================================ */

:root{
  --a-yesil:#0a8f45;   --a-yesil-koyu:#046a31;
  --a-turuncu:#ef7622; --a-turuncu-koyu:#c65a10;
  --a-kirmizi:#d9342c; --a-kirmizi-koyu:#a72118;
  --a-sari:#f2b705;    --a-sari-koyu:#c08f00;
  --a-krem:#fff8ec;    --a-krem-koyu:#fdeed6;
  --a-murekkep:#22201d;

  /* çatı renkler: lacivert yerine canlı yeşil, soğuk gri yerine krem */
  --sg-navy:var(--a-yesil-koyu);
  --sg-navy-koyu:#03522a;
  --sg-yesil:var(--a-yesil);
  --sg-murekkep:var(--a-murekkep);
  --sg-koyu:#3a352f;
  --sg-orta:#5f594f;
  --sg-soluk:#8d857a;
  --sg-cizgi:#efe2cb;
  --sg-cizgi-ince:#f6ecd9;
  --sg-zemin:var(--a-krem);

  --mc:var(--a-yesil);
  --mc-koyu:var(--a-yesil-koyu);
  --mc-metin:var(--a-yesil-koyu);
  --mc-cizgi:#bfe0cb;
  --ms:#eaf6ee;
  --mc-vurgu:var(--a-turuncu);

  --golge:0 1px 2px rgba(34,32,29,.05), 0 10px 26px -14px rgba(34,32,29,.22);
  --golge-lg:0 28px 60px -30px rgba(34,32,29,.5);
}

/* ---------- üst: krem şerit, yeşil hap düğmeli menü ---------- */
body.ga-tema .ust{background:rgba(255,253,247,.96);border-bottom:1px solid var(--a-krem-koyu)}
body.ga-tema .ust-serit{background:var(--a-krem);color:var(--a-murekkep);border-bottom:1px solid rgba(34,32,29,.06)}
body.ga-tema .ust-serit .etiket{color:var(--a-turuncu)}
body.ga-tema .ust-serit-sag{color:#5f594f}
body.ga-tema .ust-serit-sag a{font-weight:600;color:var(--a-yesil-koyu)}
body.ga-tema .ust-serit-sag a:hover{color:var(--a-turuncu);text-decoration:none}
body.ga-tema .menu-oge>a{color:var(--a-murekkep);border-radius:100px;padding:10px 14px;margin:0 1px;transition:var(--gecis)}
body.ga-tema .menu-oge>a::after{content:none}
body.ga-tema .menu-oge:hover>a{background:var(--a-krem-koyu);color:var(--a-yesil-koyu)}
body.ga-tema .menu-oge.aktif>a{background:var(--a-yesil);color:#fff}
body.ga-tema .ara{background:#fff;border-radius:100px;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(34,32,29,.12)}
body.ga-tema .ara input{border:0;background:transparent}
body.ga-tema .ara button{background:var(--a-yesil);color:#fff;border-radius:50%}
body.ga-tema .acilir{border-radius:var(--r)}
body.ga-tema .acilir a:hover{background:var(--a-krem);color:var(--a-yesil-koyu)}
body.ga-tema .acilir a::before{background:var(--a-yesil)}
body.ga-tema .menu-dugme span{background:var(--a-murekkep)}
body.ga-tema .menu-sosyal{border-left-color:rgba(34,32,29,.14)}
body.ga-tema .menu-sosyal a{color:var(--a-yesil-koyu)}
body.ga-tema .menu-sosyal a:hover{background:var(--a-krem-koyu);color:var(--a-turuncu)}
body.ga-tema .acilir-dis{color:var(--a-turuncu)}
@media(min-width:1240px) and (max-width:1479px){
  body.ga-tema .menu-oge>a{padding:9px 10px;margin:0}
}
@media(max-width:1239px){
  body.ga-tema.menu-acik .menu-oge>a{border-radius:0;padding:14px 4vw;margin:0}
  body.ga-tema.menu-acik .menu-oge.aktif>a{background:var(--a-krem);color:var(--a-yesil-koyu)}
}

/* ---------- tipografi ---------- */
h1,h2,h3,h4,h5{font-variation-settings:"wdth" 106;letter-spacing:-.025em}
.etiket{font-size:var(--t-xs);letter-spacing:.16em;color:var(--a-turuncu)}
.etiket-mc{color:var(--mc-metin)}

/* ---------- düğmeler: hap biçimi ---------- */
.dugme{border-radius:100px;font-weight:700;border-color:transparent;box-shadow:inset 0 0 0 2px var(--sg-cizgi)}
.dugme:hover{border-color:transparent;color:var(--mc-metin);box-shadow:inset 0 0 0 2px var(--mc);transform:translateY(-2px)}
.dugme-dolu,.dugme-dolu:hover{box-shadow:none;color:#fff}

/* ---------- kartlar: yumuşak köşe, çerçevesiz gölge ---------- */
.kart{border:0;border-radius:var(--r-lg);box-shadow:0 0 0 1px rgba(34,32,29,.06),0 20px 40px -32px rgba(34,32,29,.7)}
.kart:hover{box-shadow:0 0 0 1px rgba(34,32,29,.06),0 28px 50px -30px rgba(34,32,29,.75);transform:translateY(-6px)}
div.kart:hover{transform:none}

/* ---------- sayfa başlığı: giriş slaytının krem zemini ve renk benekleri ---------- */
.kirinti{background:#fffdf7}
.kirinti a:hover{color:var(--a-turuncu)}
.sayfa-bas{position:relative;overflow:hidden;border-bottom:1px solid var(--a-krem-koyu);
  background:linear-gradient(150deg,#fffdf7 0%,var(--a-krem) 52%,var(--a-krem-koyu) 100%)}
.sayfa-bas::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(34% 90% at 92% 0%,rgba(242,183,5,.42),transparent 64%),
             radial-gradient(30% 80% at 0% 100%,rgba(10,143,69,.16),transparent 66%)}
.sayfa-bas>.kapsam{position:relative}
.sayfa-bas h1{font-size:clamp(34px,4.8vw,56px);line-height:1.03;font-variation-settings:"wdth" 108}
.sayfa-bas .giris{color:#4a453f}

/* ---------- görsel çerçeveleri ---------- */
.tesis-gorsel,.harita-cerceve,.lokasyon-foto,.video-kapak,.video>iframe{border-radius:var(--r-lg)}
.harita-cerceve{border-color:var(--a-krem-koyu)}
.video-oynat{color:var(--a-yesil-koyu)}
.video-kapak:hover .video-oynat{background:var(--a-yesil)}

/* ---------- form ---------- */
.form input,.form select,.form textarea{border-radius:var(--r)}
.uyari-kutu{border-radius:var(--r)}

/* ---------- alt bilgi: mürekkep zemin, dört renkli şerit ---------- */
.alt{border-top:5px solid var(--a-yesil);
  border-image:linear-gradient(90deg,var(--a-yesil) 0 25%,var(--a-turuncu) 25% 50%,var(--a-kirmizi) 50% 75%,var(--a-sari) 75% 100%) 1}
.alt h5{color:#fff}
.alt-menu a:hover,.alt address a:hover,.alt-yasal a:hover{color:var(--a-sari)}
.alt-sosyal a:hover{color:var(--a-sari)}

/* en üst banttaki sosyal medya simgeleri */
body.ga-tema .ust-serit-sosyal{border-left-color:rgba(34,32,29,.16)}
body.ga-tema .ust-serit-sosyal a{color:var(--a-yesil-koyu)}
body.ga-tema .ust-serit-sosyal a:hover{background:var(--a-krem-koyu);color:var(--a-turuncu)}

/* ---------- ürün görseli ----------
   Ürünler saydam zeminli dekupedir (uploads/urun/v2): kartın renkli zemininde durur,
   tabandaki temas gölgesi görselin içindedir. Görsel çerçeveye orantılı sığar ve
   tabana hizalanır; böylece yan yana kartlarda ürünler aynı zemin çizgisine oturur. */
.urun-gorsel{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ms) 0%,var(--ms) 62%,color-mix(in srgb,var(--ms) 86%,#22201d) 100%)}
.urun-gorsel img{position:absolute;left:var(--s3);right:var(--s3);top:var(--s3);bottom:10px;
  width:calc(100% - 2*var(--s3));height:calc(100% - var(--s3) - 10px);max-height:none;
  object-fit:contain;object-position:center bottom;filter:none}

/* ---------- ürün görseli büyüteci (pop-up) ---------- */
.urun-gorsel.buyutulur{cursor:zoom-in}
.urun-gorsel.buyutulur::after{content:"";position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23046a31' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:var(--golge);opacity:0;transform:scale(.9);transition:var(--gecis);pointer-events:none}
.urun-gorsel.buyutulur:hover::after,.kart:focus-visible .urun-gorsel.buyutulur::after{opacity:1;transform:none}
@media(hover:none){.urun-gorsel.buyutulur::after{opacity:.9;transform:none}}
body.buyutec-acik{overflow:hidden}
.buyutec{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:4vmin;background:rgba(34,32,29,.78);backdrop-filter:blur(6px)}
.buyutec[hidden]{display:none}
.buyutec-ic{position:relative;display:flex;flex-direction:column;max-width:min(1100px,94vw);max-height:92vh;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);animation:buyutec-gel .22s cubic-bezier(.2,.7,.3,1)}
@keyframes buyutec-gel{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.buyutec-ic{animation:none}}
/* Büyüteç çerçevesi her üründe aynı yatay ebattadır (4:3); dikey görsel çerçeveye sığdırılır, pencere dikleşmez. */
.buyutec-ic{width:min(1040px,94vw)}
.buyutec-ic img{display:block;width:100%;aspect-ratio:4/3;max-height:calc(92vh - 76px);height:auto;object-fit:contain;margin:0 auto;background:var(--ms)}
.buyutec-alt{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:14px var(--s3);border-top:1px solid var(--sg-cizgi-ince)}
.buyutec-ad{font-weight:700;color:var(--sg-murekkep);font-size:var(--t-md);line-height:1.3}
.buyutec-bag{min-height:40px;padding-inline:18px;white-space:nowrap}
.buyutec-kapat{position:absolute;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--sg-murekkep);font-size:26px;line-height:1;box-shadow:var(--golge)}
.buyutec-kapat:hover{background:var(--a-yesil);color:#fff}

/* ---------- ürün sahne fotoğrafı ----------
   uploads/urun/sahne altındaki görseller ürünün gerçek bir ortamda çekilmiş gibi durduğu
   4:3 fotoğraflardır: çerçeveyi tam doldurur. Dekupe görseller (v2) eski kurala uyar. */
.urun-gorsel:has(img[src*="/urun/sahne/"]){background:var(--sg-zemin);aspect-ratio:4/3 !important}
.urun-gorsel img[src*="/urun/sahne/"]{inset:0;left:0;right:0;top:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center}
.kart:hover .urun-gorsel img[src*="/urun/sahne/"]{transform:scale(1.04)}
.urun-gorsel img[src*="/urun/sahne/"]{transition:transform .6s cubic-bezier(.2,.7,.3,1)}

/* Marka hero (13.10.2026): fotograf saga yasli ve hero'nun ~%76'si kadar genis durur
   (tam genislikte 4:3 fotograf cok kirpiliyor, soldaki urun/kisi rengin altinda kayboluyordu).
   Sol kenari markanin renginin altinda kalir, renk soldan saga yumusak gecisle (feather) biner; sert kesim yok.
   Dikey odak marka.php'deki $hero_odak ile markaya gore verilir (--odak). */
@media(min-width:960px){
  .marka-hero-foto{position:relative;background:var(--mc-koyu)}
  /* mutlak konum: fotografin kendi orani hero yuksekligini buyutmesin */
  .marka-hero-foto .marka-hero-zemin{position:absolute;inset:0;grid-column:1 / -1;grid-row:1;height:auto;z-index:0}
  .marka-hero-foto .marka-hero-zemin img{position:absolute;right:0;top:0;width:76%;height:100%;object-position:center var(--odak,50%)}
  .marka-hero-foto .marka-hero-zemin::before{inset:0;width:auto;opacity:1;
    background:linear-gradient(90deg,var(--mc-koyu) 0%,var(--mc-koyu) 25%,
      color-mix(in srgb,var(--mc-koyu) 86%,transparent) 32%,
      color-mix(in srgb,var(--mc-koyu) 56%,transparent) 39%,
      color-mix(in srgb,var(--mc-koyu) 24%,transparent) 46%,
      transparent 54%)}
}