/* 2026-10-09, kullanıcı isteği: "turuncu ve yuvarlaklar trend yolla çok aynı olmuş ... köklü güzel bir değişiklik" +
   "zoom out yapmış gibi, ilk açılışta daha fazla ürün/seçenek". Yön (2026-10-09, 2. tur: "antrasit renkler tatlı olur"): antrasit + soğuk gri, tek vurgu çelik mavisi, keskin köşe, sıkı yoğunluk. */
:root {
  --sise: #25282c; --sise-derin: #1b1d20;
  --buz: #eceef0; --beyaz: #ffffff;
  --kehribar: #33383e; --kehribar-koyu: #1f2327;   /* eski adlar: artık yeşil eylem rengi */
  --vurgu-yazi: #ffffff;
  --murekkep: #1d2024; --soluk: #5c636b; --cizgi: #d5d9dd;
  --nane: #c3d4de;   /* tek vurgu: soğuk çelik mavisi */
}
html { font-size: 15px; }
body { font-size: 1rem; line-height: 1.5; }
/* tek köşe düzeni: keskin */
.dugme, .katalog-al, .vitrin-kart, .vitrin-resim img, .arama input, .vitrin-sekme, .yk-izgara a, .galeri-izgara li, .galeri-izgara img,
.kat-serit, .bolum *, .alt * { border-radius: 2px !important; }
/* üst bar: sıkı */
.ust-ic { min-height: 54px; gap: 20px; }
.marka { font-size: 1.35rem; gap: 9px; }
.marka .ikon { width: 22px; height: 22px; }
.sekmeler a { padding: 0 16px; font-size: .95rem; border-bottom-width: 3px; }
.sekmeler a.etkin { color: var(--kehribar); border-bottom-color: var(--kehribar); }
.arama input { height: 36px; border-radius: 2px; border-width: 1px; background: #fff; }
/* giriş: iki sütun, koyu yeşil bant */
.yh { background: var(--sise); color: #fff; }
.yh-ic { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; padding-block: 22px; }
.yh h1 { font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: 1.08; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.yh p { margin: 10px 0 16px; color: rgba(255,255,255,.82); max-width: 42ch; font-size: 1rem; }
.yh-dugme { display: flex; gap: 10px; flex-wrap: wrap; }
.yh .dugme { min-height: 42px; padding: 0 20px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.yh .dugme-ana { background: var(--nane); color: var(--sise); }
.yh .dugme-ana:hover { background: #fff; }
.dugme-hayalet { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); }
.dugme-hayalet:hover { background: #fff; color: var(--sise); }
.yh-mozaik { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 190px; }
.yh-mozaik img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yh-mozaik .yh-buyuk { grid-row: 1 / span 2; }
/* kategori ızgarası */
.yk { padding: 14px 0 6px; }
.yk-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.yk-izgara a { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px; background: #fff; border: 1px solid var(--cizgi); text-decoration: none; color: var(--murekkep); }
.yk-izgara a:hover { border-color: var(--kehribar); }
.yk-resim { grid-row: 1 / span 2; width: 56px; height: 56px; background: #fff; }
.yk-resim img { width: 100%; height: 100%; object-fit: cover; }
.yk-ad { font-weight: 600; font-size: .92rem; line-height: 1.2; align-self: end; }
.yk-say { font-size: .78rem; color: var(--soluk); align-self: start; }
/* vitrin + kategori şeritleri: daha çok ürün */
.vitrin, .bolum { padding-block: 16px; }
.vitrin-kart { flex-basis: 168px; max-width: 168px; padding: 8px; }
.vitrin-kart h3 { font-size: .85rem; line-height: 1.25; }
.vitrin-kart .katalog-al { min-height: 32px; font-size: .8rem; padding: 0 10px; }
.vitrin-serit { gap: 8px; }
.vitrin-sekme { font-size: .92rem; }
.vitrin-sekme.etkin { background: var(--kehribar); color: #fff; border-color: var(--kehribar); }
h2 { font-size: 1.35rem; }
.kat-serit-bas h3 { font-size: 1.05rem; }
.galeri { padding-block: 18px; }
.galeri h2 { font-size: 1.35rem; }
.galeri-izgara { gap: 6px; }
@media (min-width: 1200px) { .vitrin-kart { flex-basis: 176px; max-width: 176px; } }
@media (max-width: 899px) {
  .yh-ic { grid-template-columns: 1fr; gap: 14px; padding-block: 16px; }
  .yh-mozaik { height: 140px; }
  .yk-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yk-izgara a { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 4px; row-gap: 2px; }
  .yk-resim { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1; }
  .yk-ad { font-size: .8rem; align-self: auto; } .yk-say { font-size: .7rem; }
}
@media (max-width: 460px) { .yh .dugme { padding: 0 12px; font-size: .85rem; } .yh-dugme { flex-wrap: nowrap; } }
.yh-mozaik { overflow: hidden; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.yh-mozaik img { min-height: 0; min-width: 0; }
.yh-mozaik .yh-buyuk { object-position: 50% 62%; }
.vitrin-resim img { aspect-ratio: 1 / 1; max-height: 150px; }
.vitrin-sekme { padding-inline: 12px; }
@media (max-width: 460px) {
  .ust-ic { gap: 10px; } .marka { font-size: 1.05rem; gap: 6px; } .marka .ikon { width: 18px; height: 18px; }
  .sepet-link { font-size: .85rem; gap: 4px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .yk-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yk-izgara a { grid-template-columns: 52px 1fr; justify-items: start; text-align: left; padding: 6px; }
  .yk-resim { grid-row: 1 / span 2; width: 52px; height: 52px; aspect-ratio: auto; }
  .yk-ad { font-size: .85rem; align-self: end; } .yk-say { align-self: start; }
}


/* antrasit zemin: giriş bandı ve bantlar */
body { background: #eceef0; }
.yh { background: linear-gradient(115deg, #1b1d20 0%, #25282c 55%, #30353b 100%); }
.vitrin { background: #e2e5e8; border-block: 1px solid #d0d4d8; }
.galeri { background: #e6e8ea; }
.sekmeler { background: #fbfbfc; }
.yk-izgara a { border-color: #d5d9dd; }
.yk-izgara a:hover { border-color: #33383e; box-shadow: 0 2px 8px rgba(27, 29, 32, .14); }
.vitrin-kart { box-shadow: 0 1px 3px rgba(27, 29, 32, .08); }
.kat-hepsi { color: var(--soluk); }

/* HAREKET (2026-10-09, kullanıcı isteği: "sayfaya hareketlilik, animasyon"). Her hareketin bir işi var: açılışta başlık > düğme sırası (dikkat sırası),
   kaydırınca kartların belirmesi (yeni içerik geldiğini gösterir), üzerine gelince kaldırma (tıklanabilir olduğunu gösterir). transform + opacity dışında bir şey oynamaz. */
@media (prefers-reduced-motion: no-preference) {
  .yh h1, .yh p, .yh-dugme, .yh-mozaik { animation: yh-gir .7s cubic-bezier(.16, 1, .3, 1) both; }
  .yh p { animation-delay: .08s; } .yh-dugme { animation-delay: .16s; } .yh-mozaik { animation-delay: .12s; }
  @keyframes yh-gir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .yh-mozaik img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .yh-mozaik:hover img { transform: scale(1.04); }
  .yh-mozaik { overflow: hidden; }
  /* kaydırınca belirme: yeni.js .hrk sınıfını ekler, görününce .hrk-ac verir */
  .hrk { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--gec, 0ms); }
  .hrk.hrk-ac { opacity: 1; transform: none; }
  .yk-izgara a, .vitrin-kart, .dugme, .katalog-al { transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
  .yk-izgara a:hover { transform: translateY(-2px); }
  .vitrin-kart:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(27, 29, 32, .14); }
  .dugme:active, .katalog-al:active { transform: scale(.97); }
}
/* 2026-10-09, kullanıcı isteği: "resim üretme aracını kur" — giriş bandında yapay zekâyla üretilmiş ATMOSFER görseli (boş sofra; ürün DEĞİL), sol tarafı koyulaştırılmış ki yazı okunsun. */
.yh { background: linear-gradient(90deg, rgba(27, 29, 32, .94) 0%, rgba(27, 29, 32, .78) 48%, rgba(27, 29, 32, .45) 100%), url(img/uretilen/hero-masa.webp) center 55% / cover no-repeat, #1b1d20; }

/* 2026-10-09, kullanıcı isteği: "tabelalı bina arkada çok hafif silik dursun; sadece orası antrasit olmuş, siteden kopuk; siteyi çok hafif karart, tamamen bembeyaz da olmasın."
   → giriş bandı artık sayfayla aynı açık gri ailesinde; tabela bandın ARKASINDA silik; antrasit yalnız üst barda kalır. */
:root { --buz: #e3e6e9; --kart: #f6f7f8; }
body { background: #e3e6e9; }
.yh { position: relative; isolation: isolate; overflow: hidden; background: #d6dade; color: #1d2024; }
.yh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(214,218,222,.55) 0%, rgba(214,218,222,0) 60%); pointer-events: none; }
.yh h1 { color: #1d2024; }
.yh p { color: #3d444b; }
.yh .dugme-ana { background: #33383e; color: #fff; }
.yh .dugme-ana:hover { background: #1f2327; }
.dugme-hayalet { color: #33383e; border-color: #33383e; background: rgba(246,247,248,.5); }
.dugme-hayalet:hover { background: #33383e; color: #fff; }
.vitrin { background: #d9dde1; border-block-color: #c8cdd2; }
.galeri { background: #dcdfe3; }
.sekmeler { background: #f1f2f4; }
.yk-izgara a, .vitrin-kart, .kat-serit .vitrin-kart { background: var(--kart); }
.vitrin-resim img { background: #fbfbfc; }
.arama input { background: var(--kart); }

/* 2026-10-09, kullanıcı isteği: "zemini bir ton daha koyulaştır" */
:root { --buz: #d9dde1; --kart: #f1f3f5; }
body { background: #d9dde1; }
.yh { background: #cdd2d7; }
.yh::after { background: linear-gradient(90deg, rgba(205,210,215,.55) 0%, rgba(205,210,215,0) 60%); }
.vitrin { background: #cfd3d8; border-block-color: #bcc1c7; }
.galeri { background: #d2d6db; }
.sekmeler { background: #e9ebee; }

/* 2026-10-09, kullanıcı isteği: "üstte bardak tam görünmüyor, borcamlar tam görünmüyor... otomatik sırayla değişsin, 10 saniyede bir" —
   fotoğraflar KIRPILMAZ (contain), boşluk kendi bulanık halini alır; yeni.js sitedeki sofra fotoğraflarından 10 sn'de bir değiştirir. */
.yh-mozaik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 6px; height: 190px; overflow: visible; }
.yh-hucre { position: relative; overflow: hidden; background: #b9bec4; min-width: 0; }
.yh-kat { position: absolute; inset: 0; opacity: 1; transition: opacity .9s ease; }
.yh-kat::before { content: ""; position: absolute; inset: -14px; background: var(--arka) center / cover no-repeat; filter: blur(14px) brightness(.92); }
.yh-kat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.yh-kat.yh-gelen { opacity: 0; }
.yh-mozaik:hover img { transform: none; }
@media (max-width: 899px) { .yh-mozaik { height: 130px; } }

/* 2026-10-13, kullanıcı isteği: "arkadaki büyük GROSS yazısının yerine Dosyalar'daki logoyu koy" + "Papilla afişini ve yanındaki 4 resmi tamamen kaldır": giriş bölümünde fotoğraf mozaiği
   (ve Papilla karosu) kalktı. 2026-10-13 akşam "logo bi önceki gross gibi arkaya yedir" -> düz logo arkaya silik kondu.
   2026-10-15, Burak: "dosyalarımda logo içerisindeki resmi sitenin üstündeki gross yazısıyla değiştir, binayla beraber eski grossengross formatı gibi arka planda silik şekilde
   uyarla üst tarafa" -> düz logo (.yh-logo) KALDIRILDI; Dosyalar/Logo "GrossenGross Mağaza Tabelası.png" (bina + yeni logolu tabela; uretilen/magaza-tabela-1536|768.webp)
   giriş bölümünün ARKASINDA silik, eski tabela düzeniyle: yazı tarafı temiz kalsın, görüntü sağda görünsün (maske); .yh::after açık gri geçişi yazı tarafını soldan örter. */
.yh::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(790px, 64vw); z-index: -1; pointer-events: none; opacity: .26;
  background: url(img/uretilen/magaza-tabela-1536.webp) 50% 45% / cover no-repeat;      /* kutu = görüntünün kendisi: sol kenarı maskeyle erir, sert kenar kalmaz */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); }
@media (max-width: 599px) {   /* telefon / kapalı Z Fold: yazı tüm genişlikte -> bina bütün görünür ama çok daha silik; üst-sağ köşe biraz belirgin, sol-alt (yazı) daha temiz */
  .yh::before { width: auto; left: 0; background-image: url(img/uretilen/magaza-tabela-768.webp); opacity: .12;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, #000 25%, rgba(0,0,0,.4) 100%); mask-image: linear-gradient(200deg, #000 0%, #000 25%, rgba(0,0,0,.4) 100%); }
}

/* 2026-10-11, kullanıcı isteği: "Veb sayfasında sağ üstte adam logosu değilde / üye ol - giriş yap çıksın" — girişsiz ziyaretçide üst çubukta kişi simgesi yerine
   "Üye ol / Giriş yap" yazı bağlantıları (js/script.js baslik(); ikisi de uye.html'e gider). Girişli üyede simge + "Merhaba <ad>" menüsü aynen kalır.
   344 px (kapalı Z Fold) gibi dar ekranda iki bağlantı alt alta, küçük punto: üst çubuk taşmasın, logo/favori/sepet yerinde kalsın. */
.hesap-kap [hidden] { display: none !important; }
.uye-yazi { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; font-weight: 600; font-size: 1.15rem; line-height: 1.15; color: inherit; }
.uye-yazi a { color: inherit; text-decoration: none; }
.uye-yazi a:hover, .uye-yazi a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.uye-bol { opacity: .5; font-weight: 400; }
@media (max-width: 720px) { .uye-yazi { font-size: .85rem; gap: .4em; } }
@media (max-width: 400px) {
  .uye-yazi { flex-direction: column; align-items: flex-end; gap: 1px; font-size: .72rem; line-height: 1.2; }
  .uye-bol { display: none; }
  .ust-ic { gap: 6px; } .marka { font-size: 1rem; gap: 5px; } .fav-link, .hesap-kap { margin-right: 0; }   /* iki satırlı yazı 344 px'te sepeti taşırmasın */
}

/* 2026-10-12, kullanıcı isteği: "Teknsayfaya sığdır" (açık Z Fold'da uye.html "Giriş Yap veya Üye Ol" kartı + üst bar kaydırma gerektiriyordu).
   YALNIZ üyelik sayfası (yeni_tasarim.py uye.html'in <body> etiketine "uye-sayfa" sınıfı ekler) ve YALNIZ kısa ekranda (yükseklik ≤ 820 px):
   üst çubuk / menü şeridi / arama satırı ve kartın iç-dış boşlukları dikeyde sıkılır; yazılar, düğmeler, Google satırı, onay metni aynen kalır.
   Uzun ekranda ve öbür sayfalarda hiçbir şey değişmez. Kayıt adımında (ad, soyad, telefon, şifre, onay kutusu) kart daha uzundur: aynı sıkılık orada da uygulanır. */
@media (max-height: 820px) {
  body.uye-sayfa .ust-ic { min-height: 44px; }
  body.uye-sayfa .sekme-ic { min-height: 36px; }
  body.uye-sayfa .sekmeler a { font-size: .88rem; border-bottom-width: 2px; }
  body.uye-sayfa .arama-satir { padding: 4px 16px; gap: 6px; }
  body.uye-sayfa .arama-satir .arama input { height: 34px; }
  body.uye-sayfa .arama-ikon { width: 34px; height: 34px; }
  body.uye-sayfa .arama-ikon svg { width: 20px; height: 20px; }
  body.uye-sayfa #uyeSayfa { padding-block: 14px 18px; }
  body.uye-sayfa .uye-tek { padding: 16px 22px 14px; }
  body.uye-sayfa .uye-tek h1 { font-size: 1.15rem; margin-bottom: 2px; }
  body.uye-sayfa .uye-aciklama { margin-bottom: 10px; font-size: .8rem; line-height: 1.35; }
  body.uye-sayfa .uye-tek .form.uye-adim { gap: 8px; }
  body.uye-sayfa .uye-tek .form label { gap: 3px; font-size: .84rem; }
  body.uye-sayfa .uye-tek .form input { padding: 8px 12px; }
  body.uye-sayfa .uye-tek .dugme { padding: 11px 18px; }
  body.uye-sayfa .uye-google { gap: 6px; margin-top: 0; }
  body.uye-sayfa .uye-google-dugme { min-height: 40px; }
  body.uye-sayfa .uye-ayrac { margin: 0; font-size: .8rem; }
  body.uye-sayfa .uye-google-not { font-size: .72rem; line-height: 1.3; }
}

/* 2026-10-12, kullanıcı isteği: "web sitesinde sağdaki destek hattıyla instagramı yukarı almıştık ayrıca sağa sola götüren oklar da yok".
   (1) ÜST ÇUBUK İKONLARI: 2026-10-09 isteği "whatsapp destek hattı ile instagram emojisini sol üstte siyah bar içine grossengrosstan sonra ekle" — js/script.js
   marka yazısının yanına #ustIkonlar kabını koyuyordu ama bunun için hiçbir CSS yoktu (genişlik 0, görünmüyordu) ve sağdaki yüzen Instagram yuvarlağı +
   dikey "Destek Hattı" sekmesi (script.js'ten artık kaldırıldı) hâlâ ortada duruyordu. Geniş ekranda (≥1100 px; body.arama-ikonlu YOK) ikonlar siyah çubukta
   markanın yanında; ≤1099 px'te (telefon, Z Fold) zaten arama satırının sağındaki yuvarlak ikonlar (style.css .arama-ikon) kullanılır, çubuktakiler gizli. */
.ust-ikonlar { display: none; align-items: center; gap: 8px; flex: none; }
body:not(.arama-ikonlu) .ust-ikonlar { display: flex; margin-right: auto; }
body:not(.arama-ikonlu) .marka:has(+ .ust-ikonlar) { margin-right: 0; }          /* style.css'te marka sağa boşluk iter; ikonlar markaya yapışık kalsın */
body:not(.arama-ikonlu) .ust-ikonlar ~ .hesap-kap { margin-left: 0; }              /* boşluğu yalnız ikon kabı alsın, sağ grup sağda kalsın */
.ust-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% !important; color: #fff; text-decoration: none; flex: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.ust-ikon:hover { transform: scale(1.1); }
.ust-ikon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ust-ikon svg { width: 20px; height: 20px; display: block; }
.ust-ikon.wa { background: #25d366; }
.ust-ikon.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ödeme sayfası (beyaz sade üst çubuk .al-ust-ic): ikonlar markanın yanında; ≤480 px'te yalnız WhatsApp (yer dar) */
.al-ust-ic .ust-ikonlar { display: flex; }
.al-ust-ic .ust-ikon { box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
@media (max-width: 480px) { .al-ust-ic { gap: 10px; } .al-ust-ic .ust-ikon { width: 30px; height: 30px; } .al-ust-ic .ust-ikon svg { width: 18px; height: 18px; } .al-ust-ic .ust-ikon.ig { display: none; } }

/* (2) ŞERİT KENAR OKLARI (yeni.js "serit-kap"): her yatay ürün şeridinin sol/sağ kenarında, ilk kartın resim bölümünün dikey ortasında (Bilgi al düğmesine binmez).
   Sitenin köşe düzeni keskin (2px); yarı saydam beyaz zemin + antrasit ok; kenardan 12 px dışarı taşar. Başta sol, sonda sağ ok gizli ([hidden]). */
.serit-kap { position: relative; }
.serit-ok { position: absolute; top: var(--ok-ust, 50%); transform: translateY(-50%); z-index: 4; width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--sise); border: 1px solid rgba(37, 40, 44, .28); border-radius: 2px !important; cursor: pointer;
  box-shadow: 0 2px 10px rgba(27, 29, 32, .22); transition: background .15s ease, color .15s ease; }
.serit-ok[hidden] { display: none; }
.serit-ok:hover { background: var(--sise); color: #fff; border-color: var(--sise); }
.serit-ok:focus-visible { outline: 2px solid var(--sise); outline-offset: 2px; }
.serit-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.serit-ok-sol { left: -12px; }
.serit-ok-sag { right: -12px; }
@media (max-width: 899px), (pointer: coarse) { .serit-ok { width: 34px; height: 34px; background: rgba(255, 255, 255, .88); } .serit-ok svg { width: 20px; height: 20px; } }
@media (max-width: 480px) { .serit-ok { width: 30px; height: 30px; background: rgba(255, 255, 255, .84); } .serit-ok svg { width: 18px; height: 18px; } .serit-ok-sol { left: -8px; } .serit-ok-sag { right: -8px; } }

/* 2026-10-15, Burak: "Ana sayfaya yapımda diye bi uyarı yazalım" — ince, sakin uyarı bandı (ana sayfa, üst çubuğun altı) */
.yapim-bant { background: #fff4d6; color: #5b4a12; border-bottom: 1px solid #ecd9a0; text-align: center; font-size: .85rem; line-height: 1.3; padding: 6px 12px; }
.yapim-bant b { font-weight: 700; }
@media (max-width: 1100px) { .yapim-bant { font-size: 12px; padding: 4px 10px; } }

/* 2026-10-15, Burak: "satıcıya soru sor ... Mesajlarım sekmesi, cevap gelince uyarı ya da sayı" — üst menüde okunmamış cevap sayısı + Mesajlarım sayfası */
.mesaj-rozet { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px !important; background: #d92d20; color: #fff; font: 700 11px/1 var(--govde, inherit); margin-left: 6px; vertical-align: 1px; }
.mesaj-rozet[hidden] { display: none; }
.hesap-kap .fav-link .mesaj-rozet { margin-left: 4px; }
.mesaj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mesaj-kart { border: 1px solid var(--cizgi); padding: 10px 12px; background: #fff; display: grid; gap: 4px; }
.mesaj-kart.yeni { border-color: #d92d20; box-shadow: inset 3px 0 0 #d92d20; }
.mesaj-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mesaj-urun { font-weight: 700; color: var(--murekkep); text-decoration: none; }
.mesaj-urun:hover { text-decoration: underline; }
.mesaj-yeni { background: #d92d20; color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 9px !important; }
.mesaj-konu { margin: 0; font-size: .92rem; }
.mesaj-zaman { color: var(--soluk); font-weight: 400; font-size: .82rem; }
.mesaj-metin { margin: 0; font-size: .92rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.mesaj-cevap { border-top: 1px dashed var(--cizgi); margin-top: 4px; padding-top: 6px; display: grid; gap: 2px; }
.mesaj-cevap-baslik { margin: 0; font-size: .78rem; font-weight: 700; color: #1f8f4e; }
.mesaj-bekle { margin: 4px 0 0; font-size: .84rem; color: var(--soluk); }


/* =====================================================================================================================================================
   2026-10-15, Burak: "canlıya al" — deneme katmanındaki (deneme_ek.css) tüm adımlar CANLIYA alındı: şeritlerde en çok 6 ürün, kısa kartlar, ekranla ölçeklenen genişlik,
   imza köşe çizgileri, düzeltilmiş tabela. Aşağıdaki yorumlar adımların kendi isteklerini taşır. */
/* DENEME KATMANI (2026-10-15, Burak: "birazdaha kalabalık azaltacaz, en fazla 6 ürün görünsün; sistemi yavaş yavaş değiştirecez, deneme sayfası üzerinde gidelim, en sonda canlıya alırız").
   Yalnız /deneme/ sitesine eklenir (deneme_ek.py); canlı siteye ŞİMDİLİK girmez. Beğenilen adımlar yeni.css'e (canlı) taşınır.
   Adım 1 — kalabalık azaltma: her yatay ürün şeridinde (ana sayfa kategori şeritleri, Yeni gelenler / Çok satanlar / Öne çıkanlar, ürün sayfasında Benzer ürünler) en çok 6 ürün. */
.vitrin-serit > li:nth-child(n+7) { display: none; }

/* Adım 2 — kartları küçült (Burak, geniş ekran görüntüsüyle: "bak uzamış, mesela küçült; butonlarda da fazlalık var zaten"): kartlar kısalır
   (görsel alanı 150 → 112 px, başlık altındaki ölü boşluk gider, iç boşluk 8 → 6) ve kart altı düğmeleri ("Seçenekleri gör" / "Bilgi al") ince ve sakin olur. */
.vitrin-kart { padding: .4rem; }
.vitrin-resim img { max-height: 7.5rem; }
.vitrin-kart h3 { font-size: .8rem; min-height: 2.5em; margin: 4px 0 4px; }
.vitrin-kart .katalog-al, .vitrin-kart .katalog-al-bilgi { min-height: 1.6rem; padding: 0 .5rem; font-size: .72rem; font-weight: 600; }
.vitrin-kart .katalog-satinal { gap: 6px; }
.vitrin-fiyat { margin-bottom: 4px; font-size: .95rem; }

/* Adım 3 — genişlik düzeni (Burak: "hala böyle görüyorum ama kutucuklar uzun diğerlerinden" + "laptopta güzel görünüyor, ama extra monitörde çok çirkin"):
   sorun, geniş ekranda içeriğin sabit/dar kalması ya da (eskiden) 2200 px'e kadar yayılmasıydı. Çözüm: sayfa EKRAN GENİŞLİĞİYLE ÖLÇEKLENİR — kök yazı boyu 15 px'ten (laptop, ≤1366 px) 20 px'e kadar
   büyür, içerik genişliği 82 rem (laptopta ≈1230 px, 1920'de ≈1500, 2560'ta ≈1640), 6 kart satırı tam doldurur, kategori kutuları aynı 6 sütunla hizalı. Laptop görünümü AYNEN kalır.
   Yalnız masaüstü (>720 px); telefon/Z Fold düzenine dokunulmaz. */
@media (min-width: 721px) {
  html { font-size: clamp(15px, calc(0.6vw + 6.8px), 20px); }
  .kap { width: min(82rem, 100% - clamp(32px, 4vw, 96px)); }
  .vitrin-serit > .vitrin-kart { flex: 0 0 calc((100% - 40px) / 6); max-width: none; }
  .yk-resim { width: 3.75rem; height: 3.75rem; }
  .yk-izgara a { grid-template-columns: 3.75rem 1fr; }
}

/* Adım 4 — İMZA (Burak: "bu bizim imzamız olsun; biri siteye girdiğinde o çizgileri görünce 'tamam Grossengross'tayım' desin"; yeri: "solda ev ikonunun üstünde, sağda da
   Küçült butonunun yanı olabilir, sen bi yap kararlaştırırız"): tabeladaki iki köşe çizgisi sitenin imzası. Beyaz çizgi üst çubuktaki logonun (ev ikonu + Grossengross) sol üstünde — çubuk
   ekranda yapışık kalır, çizgi de her zaman orada durur; turuncu çizgi ekranın sağ altında SABİT, sepet yan paneli açıkken panelin (Küçült düğmesinin) hemen soluna oturur.
   Tıklamayı engellemez. Yalnız geniş ekran (≥1000 px). Boyut: Burak "görselle güzel ama %50 büyüt", sonra yine "%50 daha büyült" → ilk boyutun 2,25 katı (1,5 × 1,5). ŞEKİL: Burak "sen direk L yapmışsın, L'nin uçları yamuk" → çizgiler düz L değil, tabeladaki (perspektifli, eğik uçlu) şekli: imza_izle.py. */
@media (min-width: 1000px) {
  .ust .marka { position: relative; }
  .ust-ic { min-height: 3.9rem; }      /* büyüyen beyaz çizgi sığsın; çubuk artık ekranla birlikte ölçeklenir (eskiden sabit 54 px) */
  .ust .marka::before { content: ""; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); width: 4.73rem; height: 3.63rem; pointer-events: none; background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 76.7'%3E%3Cpolygon points='5.7,11.7 97,3 97,11.2 13.4,19.6 11.4,72.9 3,73.7' fill='%23ffffff' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
  body::after { content: ""; position: fixed; z-index: 54; right: 20px; bottom: 14px; width: 5.85rem; height: 2.96rem; pointer-events: none; background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50.6'%3E%3Cpolygon points='3,38.4 87.4,35.9 86.1,4.2 94.8,3 97,42.9 3.3,47.6' fill='%23f26a0f' stroke='%23f26a0f' stroke-width='2.2' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
  body.mini-acik::after { right: calc(156px + 12px); }
}

/* Adım 5 — ana sayfa girişindeki tabela fotoğrafı (Burak: "grossengross arka planda G'si yarım görünüyor, resmi biraz sola yatır, yazı okunsun"): fotoğraf 19° sola yatırıldı
   (yazı yatay olur) ve ince giriş bandına yazının TAMAMI sığacak şekilde kırpıldı (scripts/site_deneme/deneme_varlik_uret.py); solda yazıyı örten silikleştirme kısaldı. */
@media (min-width: 721px) {   /* telefon / Z Fold: eski silik bina düzeni aynen kalır (yazının üstüne binmesin) */
  .yh::before { width: min(680px, 44vw); opacity: .8; background: url(img/uretilen/tabela-duz.webp) 50% 50% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%); }
}

/* 2026-10-15, kullanıcı isteği: "Ürünlerimiz başlığının altındaki boşluk" (masaüstü) — başlık ile kategori ızgarası arası 40 px + 14 px idi, sıkılaştı */
#urunler .bolum-bas { margin-bottom: 6px; }
#urunler .bolum-bas h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
#urunler .yk { padding-top: 4px; }


/* 2026-10-15, Burak: "bütün ürünlere uyarla ... ürüne tıklayan o verileri görsün": ürün sayfası olan katalog kartı (katalog-urun-s) — kartın tamamı ürün sayfasına gider
   (katalog-kapla = kartı kaplayan bağlantı, style.css); düğmeler ve kalp bağlantının ÜSTÜNDE kalır (sepete ekle / Seçenekleri gör / Bilgi al çalışmaya devam eder). */
.katalog-urun-s { position: relative; }
.katalog-urun-s .katalog-gorsel { cursor: pointer; }
.katalog-urun-s .katalog-satinal { position: relative; z-index: 2; }
.katalog-urun-s .katalog-fiyat { position: relative; z-index: 0; }