/* GrossenGross MASAÜSTÜ MARKA SÖZLEŞMESİ — TEK YETKİLİ KAYNAK (2026-10-24, Burak: promtlar/GrossenGross_Tasarim_Denetimi_ve_Claude_Promptlari_20261024.md, Prompt 2).
   Kapsam: sepet, ödeme, favoriler, arama, SSS, dört yasal sayfa (+ uye.html altbilgisi). Perakende MOBİL (<=1023 px) DEĞİŞMEZ: tüm kurallar
   @media (min-width:1024px) içinde ve yalnız <body class="gg-marka"> altındadır (sınıfı scripts/site_marka/marka_uret.py ekler).
   Renk/yazı tipi değişikliği BURADA yapılır; sayfalara hex kopyalama. Eski style.css değişkenleri (--buz, --murekkep, --soluk, --cizgi, --kehribar...) yalnız
   bu sayfalarda marka değerlerine bağlanır — ikinci bir token sistemi kurulmadı.
   Ürün fotoğrafı 2:3 sözleşmesi (beyaz yuva, contain, normal karışım) scripts/site_masaustu/masaustu.css'te; buraya .ms-foto kuralı EKLEME. */

:root {
  --gg-zemin: #ffffff;        /* ana sayfa / içerik zemini */
  --gg-yuzey: #ffffff;        /* kart ve form yüzeyi */
  --gg-yuzey-2: #f7f7f7;      /* küçük ikincil yüzey / seçili alan — bütün sayfa zemini DEĞİL */
  --gg-metin: #242424;
  --gg-metin-2: #666666;
  --gg-ayirac: #e5e5e5;       /* ince ayırıcı / alan kenarlığı */
  --gg-eylem: #333333;
  --gg-eylem-yazi: #ffffff;
  --gg-eylem-hover: #454545;
  --gg-turuncu: #f26a0f;      /* logo varlığının turuncusu DEĞİŞMEZ */
  --gg-footer: #1b1d20;
  --gg-footer-yazi: #f4f4f4;
  --gg-pasif: #eeeeee;
  --gg-pasif-yazi: #666666;
  --gg-font-govde: "Instrument Sans", "Segoe UI", sans-serif;
  --gg-font-baslik: "Bricolage Grotesque", "Segoe UI", sans-serif;
}

/* ---- mobil/tablet (<=1023): yeni eklenen ögeler görünmez; eski düzen aynen ---- */
body.gg-marka .ms-alt, body.gg-altbilgi .ms-alt { display: none; }
.gg-logo-yeni, .gg-sayfa-baslik { display: none; }
@media (max-width: 1023px) {
  .gg-sayfa-baslik { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* görünür değil ama okuyucuya açık H1 */
  .al-dar-kap:has(#odemeBos:not([hidden])) .gg-sayfa-baslik { display: none; }
}

@media (min-width: 1024px) {
  /* ---- altbilgi: tek görünür altbilgi = onaylı dört sütunlu ms-alt; eski footer.alt DOM'da kalır ---- */
  body.gg-marka > footer.alt, body.gg-altbilgi > footer.alt { display: none; }
  body.gg-marka .ms-alt, body.gg-altbilgi .ms-alt { display: block; }

  /* ---- zemin + token bağlama (yalnız gg-marka sayfaları) ---- */
  body.gg-marka {
    --buz: var(--gg-zemin);
    --beyaz: var(--gg-yuzey);
    --murekkep: var(--gg-metin);
    --soluk: var(--gg-metin-2);
    --cizgi: var(--gg-ayirac);
    --al-kenar: var(--gg-ayirac);
    --kehribar: var(--gg-eylem);
    --kehribar-koyu: var(--gg-eylem-hover);
    --govde: var(--gg-font-govde);
    --baslik: var(--gg-font-baslik);
    background: var(--gg-zemin); color: var(--gg-metin); font-family: var(--gg-font-govde);
  }
  body.gg-marka .al-sayfa { --al-kenar: var(--gg-ayirac); }
  body.gg-marka :focus-visible { outline: 2px solid var(--gg-eylem); outline-offset: 3px; }

  /* ---- başlık rolleri: başlık + ürün adı = Bricolage; gövde/form/düğme/fiyat = Instrument Sans ---- */
  body.gg-marka .al-sayfa h1, body.gg-marka .al-sayfa h2, body.gg-marka .al-sayfa h3,
  body.gg-marka .metin-sayfa h1, body.gg-marka .metin-sayfa h2, body.gg-marka .metin-sayfa h3,
  body.gg-marka .ara-sayfa h1, body.gg-marka .ara-sayfa h2, body.gg-marka .ara-sayfa h3 { font-family: var(--gg-font-baslik); letter-spacing: -.01em; color: var(--gg-metin); }
  body.gg-marka .al-sayfa h1, body.gg-marka .gg-sayfa-baslik { font-size: 30px; line-height: 1.2; font-weight: 600; }   /* sepet/favori/ödeme ana başlığı 28-32 px */
  body.gg-marka .al-sayfa h2, body.gg-marka .al-baslik-bant h2, body.gg-marka .al-baslik { font-size: 19px; line-height: 1.3; font-weight: 600; }   /* bölüm başlığı 18-22 px */
  body.gg-marka .al-sayfa h1.al-baslik, body.gg-marka .al-dar .al-kart > h1.al-baslik:first-child { font-size: 28px; line-height: 64px; }
  body.gg-marka .al-dar .al-kart > .al-baslik:first-child:not(h1) { font-size: 19px; }
  body.gg-marka .al-bos h1 { font-size: 24px; }
  body.gg-marka .al-satir h3, body.gg-marka .al-benzer h3 { font-family: var(--gg-font-baslik); color: var(--gg-metin); }
  body.gg-marka .al-baslik span, body.gg-marka .al-acilir-baslik span { font-family: var(--gg-font-govde); color: var(--gg-metin-2); }
  body.gg-marka button, body.gg-marka input, body.gg-marka textarea, body.gg-marka select { font-family: var(--gg-font-govde); }

  /* ---- sayfa başlığı (ödeme) ---- */
  body.gg-marka .gg-sayfa-baslik { display: block; position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0 0 20px; white-space: normal; }
  body.gg-marka .al-dar-kap:has(#odemeBos:not([hidden])) .gg-sayfa-baslik { display: none; }   /* boş sepet durumunda tek H1 = "Sepetiniz boş" */

  /* ---- kartlar: beyaz yüzey, ince açık ayırıcı, gölge yok; krem başlık şeritleri kalktı ---- */
  body.gg-marka .al-kart, body.gg-marka .al-bos { background: var(--gg-yuzey); border: 1px solid var(--gg-ayirac); box-shadow: none; }
  body.gg-marka .al-baslik-bant, body.gg-marka .al-dar .al-kart > .al-baslik:first-child { background: var(--gg-yuzey); border-bottom: 1px solid var(--gg-ayirac); }
  body.gg-marka .al-gri { background: var(--gg-yuzey); }
  body.gg-marka .al-satir img, body.gg-marka .al-kucuk-resimler img { background: #fff; border-color: var(--gg-ayirac); }
  body.gg-marka .al-tutar, body.gg-marka .al-ozet-satirlar .al-toplam dd, body.gg-marka .al-benzer .al-fiyat { color: var(--gg-metin); }
  body.gg-marka .al-ozet-satirlar .al-toplam dt { color: var(--gg-metin); }
  body.gg-marka .al-link, body.gg-marka .al-menu a.etkin { color: var(--gg-metin); }
  body.gg-marka .al-bosalt, body.gg-marka .al-menu button { color: var(--gg-metin-2); }
  body.gg-marka .al-menu a:hover, body.gg-marka .al-menu button:hover { color: var(--gg-eylem); }

  /* ---- düğmeler: etkin = antrasit/beyaz; devre dışı = nötr gri; ikincil = beyaz + antrasit kenar ---- */
  body.gg-marka .al-btn, body.gg-marka .al-benzer button:hover, body.gg-marka .al-avatar { background: var(--gg-eylem); border-color: var(--gg-eylem); color: var(--gg-eylem-yazi); }
  body.gg-marka .al-btn:hover { background: var(--gg-eylem-hover); border-color: var(--gg-eylem-hover); }
  body.gg-marka .al-btn[disabled], body.gg-marka .al-btn[disabled]:hover { background: var(--gg-pasif); border-color: var(--gg-pasif); color: var(--gg-pasif-yazi); }
  body.gg-marka .al-btn-hat { background: var(--gg-yuzey); color: var(--gg-eylem); border-color: var(--gg-eylem); }
  body.gg-marka .al-btn-hat:hover { background: var(--gg-yuzey-2); color: var(--gg-eylem); border-color: var(--gg-eylem); }
  body.gg-marka .al-benzer button { border-color: var(--gg-eylem); color: var(--gg-eylem); background: var(--gg-yuzey); }
  body.gg-marka .al-kod-ac, body.gg-marka .al-oklar button { background: var(--gg-yuzey); color: var(--gg-metin); border-color: var(--gg-ayirac); }
  body.gg-marka .al-kod-ac:hover, body.gg-marka .al-oklar button:hover { background: var(--gg-yuzey-2); }

  /* ---- miktar düğmeleri: sıcak krem yerine nötr yüzey ---- */
  body.gg-marka .al-adet { border-color: var(--gg-ayirac); }
  body.gg-marka .al-adet button, body.gg-marka .mini-adet button { background: var(--gg-yuzey-2); color: var(--gg-metin); }
  body.gg-marka .al-adet button:hover, body.gg-marka .mini-adet button:hover { background: var(--gg-pasif); }

  /* ---- form alanları ---- */
  body.gg-marka .al-alan input, body.gg-marka .al-alan textarea, body.gg-marka .al-kod-form input { border-color: var(--gg-ayirac); background: var(--gg-yuzey); color: var(--gg-metin); }
  body.gg-marka .al-alan input:focus, body.gg-marka .al-alan textarea:focus, body.gg-marka .al-kod-form input:focus { outline: 2px solid var(--gg-eylem); outline-offset: 0; border-color: var(--gg-eylem); }
  body.gg-marka .al-alan input.hatali, body.gg-marka .al-alan textarea.hatali { border-color: #c2273d; background: #fff8f8; }   /* hata anlamı korunur */
  body.gg-marka .tel-on { background: var(--gg-yuzey-2); border-color: var(--gg-ayirac); color: var(--gg-metin-2); }
  body.gg-marka .al-onay-satir input, body.gg-marka .al-odeme-sec input { accent-color: var(--gg-eylem); }
  body.gg-marka .al-odeme-sec { border: 1px solid var(--gg-ayirac); background: var(--gg-yuzey); }
  body.gg-marka .al-odeme-sec:has(input:checked), body.gg-marka .al-secenek:has(input:checked) { border-color: var(--gg-eylem); background: var(--gg-yuzey-2); }
  body.gg-marka .al-baglar a, body.gg-marka .al-onay-satir a { color: var(--gg-metin); }
  body.gg-marka .mini-sepet .mini-ara strong { background: var(--gg-yuzey-2); color: var(--gg-metin); }

  /* ---- sade ödeme başlığı: yazı marka yerine orijinal logo ---- */
  body.gg-marka .al-ust { background: var(--gg-yuzey); border-bottom: 1px solid var(--gg-ayirac); }
  body.gg-marka .al-marka-eski { display: none; }
  /* destek simgeleri (2026-10-12 isteği) kalır, logonun yanında; eski "Bireysel | Toptan satış" anahtarı beyaz başlıkta beyaz yazıydı (görünmüyordu) ve ödeme görevini bölüyordu → masaüstü ödeme başlığında gizli */
  body.gg-marka .al-ust .gg-logo-yeni { order: -2; }
  body.gg-marka .al-ust .ust-ikonlar { order: -1; margin-right: 0; }
  body.gg-marka .al-ust .mod-anahtar { display: none; }
  body.gg-marka .al-ust .ust-ikon.wa, body.gg-marka .al-ust .ust-ikon.ig { color: var(--gg-eylem); border: 1px solid var(--gg-ayirac); background: var(--gg-yuzey) !important; }   /* eskiden beyaz simge + beyaz kenar = görünmezdi */
  body.gg-marka .al-ust .ust-ikon.wa:hover, body.gg-marka .al-ust .ust-ikon.ig:hover { background: var(--gg-yuzey-2) !important; }
  body.gg-marka .al-ust .ust-ikon:focus-visible { outline-color: var(--gg-eylem); }
  body.gg-marka .gg-logo-yeni { display: inline-flex; align-items: center; }
  body.gg-marka .gg-logo-yeni img { display: block; width: 176px; height: auto; }
  body.gg-marka .al-geri { color: var(--gg-metin-2); }
  body.gg-marka .al-geri:hover { color: var(--gg-metin); }

  /* ---- yasal / SSS / arama sayfaları ---- */
  body.gg-marka main, body.gg-marka .bolum { background: transparent; }
  body.gg-marka .metin-sayfa p, body.gg-marka .metin-sayfa ul, body.gg-marka .metin-tarih, body.gg-marka .bolum-bas p { color: var(--gg-metin-2); }
  body.gg-marka .metin-sayfa .metin-govde strong { color: var(--gg-metin); }
  body.gg-marka .metin-sayfa a { color: var(--gg-metin); text-decoration-color: var(--gg-ayirac); text-underline-offset: 3px; }
  body.gg-marka .bolum-bas h1, body.gg-marka .bolum-bas h2 { font-family: var(--gg-font-baslik); font-weight: 600; color: var(--gg-metin); }

  /* arama sonucu / favori listesi: eski ürün kartı varyantı beyaz zeminde ince çerçeveyle ayrışır (kartın veri alanları ve fotoğraf oranı DEĞİŞMEDİ) */
  body.gg-marka .ara-liste .katalog-urun, body.gg-marka .al-fav-liste .katalog-urun { background: var(--gg-yuzey); border: 1px solid var(--gg-ayirac); border-radius: 10px; box-shadow: none; }
  /* 2026-10-25, Burak: GrossenGross_Claude_Tasarim_Promptu_20261025 §7 — arama ve favoriler onaylı liste kartıyla uyumlu (masaüstü): görünür fotoğraf alanı 2:3, beyaz, yatay ortalı, contain.
     Onaylı sözleşme (site_liste/liste.css .ls-yuva/.ls-foto): kare yuva içinde genişliğin 2/3'ü kadar tam yükseklikli 2:3 çerçeve → burada resim genişliği %66,667 + aspect-ratio 2/3 = yuva yüksekliği genişliğe eşit
     (kart UZAMAZ: eskiden 1:1 kare vardı). Fotoğraf dosyaları, kırpma (cover) ve gri şerit yok; metin, fiyat, düğme ve favori davranışı AYNI. */
  body.gg-marka .ara-liste .katalog-gorsel, body.gg-marka .al-fav-liste .katalog-gorsel { display: block; box-sizing: border-box; width: 66.6667%; height: auto; aspect-ratio: 2 / 3; margin-inline: auto; object-fit: contain; object-position: center; background: #fff; padding: 0; }
  body.gg-marka .ara-chip { background: var(--gg-yuzey); color: var(--gg-metin); border: 1px solid var(--gg-ayirac); font-family: var(--gg-font-govde); }
  body.gg-marka .ara-chip[aria-pressed="true"], body.gg-marka .ara-chip.etkin { background: var(--gg-eylem); color: var(--gg-eylem-yazi); border-color: var(--gg-eylem); }

  /* ---- SİMETRİ (2026-10-24, Burak: "simetri konusunda sıkıntı var") ---- */
  /* yan yana kartların başlık bandı aynı yükseklik: sepette "Sepetim" (28 px) ile "Sepet Özeti" (19 px) bandları 9 px farklıydı, alt çizgileri hizalanmıyordu */
  body.gg-marka .al-dar .al-kart > .al-baslik:first-child { height: 64px; line-height: 64px; padding-top: 0; padding-bottom: 0; margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.gg-marka .al-baslik-bant { height: 64px; padding-top: 0; padding-bottom: 0; }
  body.gg-marka .al-acilir-bas { min-height: 64px; padding-top: 0; padding-bottom: 0; }
  body.gg-marka .al-acilir-baslik { font-family: var(--gg-font-baslik); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--gg-metin); }
  /* ödeme başlığı: sol logo + destek simgeleri, sağ "Sepete dön" + güvenli ödeme (eskiden "Sepete dön" ortada havada kalıyordu) */
  body.gg-marka .al-ust .al-geri { margin-left: auto; margin-right: 28px; }
  /* boş hata satırı kartın altında fazladan boşluk bırakıyordu (üst ve alt iç boşluk eşit olsun); alan DOM'da kalır, duyuru (role=alert) bozulmaz */
  body.gg-marka .al-hata:empty { margin: 0; min-height: 0; }
}

/* ---- Kartla ödeme: pasif hazırlık (2026-10-25, Burak: GrossenGross_Claude_Tasarim_Promptu_20261025 §8). Seçilemez, kontrast okunur (#555 / #666 açık gri zeminde), büyük boş kutu yok.
   Kural medya sorgusu DIŞINDA: devre dışı seçenek mobilde de aynı (kullanılamayan yöntemi vaat etmemek için HTML zaten tek; yalnız renk/imleç). */
.al-odeme-pasif { cursor: not-allowed; background: #f4f4f4; }
.al-odeme-pasif input { cursor: not-allowed; }
.al-odeme-pasif strong { color: #555; }
.al-odeme-pasif small { color: #666; }

/* ================= MOBİL / TABLET (≤1023 px) — 2026-10-27, Burak: GrossenGross_Mobil_Uyarlama_ve_Son_Duzeltmeler_Claude_Promptu_20261027 =================
   Önceki dosya yalnız ≥1024 px içindi; buradan sonrası 320–1023 px. Ortak ölçüler: yan pay 16 (≤360: 12; ≥600: 24), dokunma alanı ≥44, gövde/giriş 16 px. */
@media (max-width: 1023px) {
  /* ödeme başlığı: odaklı başlık — logo + "Sepete dön"; alan seçici ve eski kısayol simgeleri yok (promptun §4 son paragrafı); "Güvenli Ödeme" dar ekranda simge + kısa yazı, taşmaz */
  body.gg-marka .al-ust-ic { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 60px; }
  body.gg-marka .al-ust .al-marka-eski, body.gg-marka .al-ust .mod-anahtar, body.gg-marka .al-ust .ust-ikonlar { display: none; }
  body.gg-marka { background: #fff; }
  body.gg-marka .al-kart, body.gg-marka .al-ozet { border: 1px solid #e5e5e5; box-shadow: none; }
  body.gg-marka .al-ust .gg-logo-yeni { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
  body.gg-marka .al-ust .gg-logo-yeni img { display: block; width: auto; max-width: 100%; height: 22px; }
  body.gg-marka .al-ust .al-geri { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0 auto; padding: 0 4px; font-size: 14px; white-space: nowrap; color: #242424; }
  body.gg-marka .al-ust .al-guvenli { flex: none; margin-left: 0; font-size: 11px; letter-spacing: .02em; gap: 4px; }
  body.gg-marka .al-ust .al-guvenli svg { width: 15px; height: 15px; }
}
@media (max-width: 420px) {
  body.gg-marka .al-ust .al-guvenli { font-size: 0; gap: 0; }        /* yalnız kilit simgesi; metin ekran okuyucuya erişilebilir adla verilir */
}

/* ---- arama + favoriler kartı (mobil/tablet): liste/kategori ile AYNI kart dili — 320–599 px 2, 600–767 px 3, 768–1023 px 4 sütun (kart arası 12 px); fotoğraf: beyaz kare yuva içinde yatay ortalı 2:3 çerçeve, contain
   (resim genişliği %66,667 + aspect-ratio 2/3 = yuva yüksekliği genişliğe eşit; kart UZAMAZ). Ad 2-3 satır, fiyat/paket ve eylem hizalı. */
@media (max-width: 1023px) {
  body.gg-marka .ara-liste, body.gg-marka #favListe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 0; margin: 0; list-style: none; }
  body.gg-marka .ara-liste .katalog-urun, body.gg-marka #favListe .katalog-urun { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
  body.gg-marka .ara-liste .katalog-gorsel, body.gg-marka #favListe .katalog-gorsel { display: block; box-sizing: border-box; width: 66.6667%; height: auto; aspect-ratio: 2 / 3; margin-inline: auto; object-fit: contain; background: #fff; padding: 0; border: 0; }
  body.gg-marka .ara-liste .katalog-urun h3, body.gg-marka #favListe .katalog-urun h3 { margin: 10px 0 0; font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif; font-size: 14.5px; line-height: 1.3; font-weight: 600; text-align: center; min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
  body.gg-marka .ara-liste .ara-alt, body.gg-marka #favListe .fav-paket, body.gg-marka #favListe .katalog-fiyat { text-align: center; font-size: 13px; line-height: 1.35; color: #666; margin: 4px 0 0; }
  body.gg-marka #favListe .katalog-fiyat { font-size: 16px; font-weight: 600; color: #242424; }
  body.gg-marka .ara-liste .katalog-al, body.gg-marka #favListe .katalog-al, body.gg-marka .ara-liste .ara-dugme, body.gg-marka #favListe .fav-kaldir { min-height: 44px; font-size: 14.5px; }
  body.gg-marka #favListe .fav-kaldir { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 6px; }
}
@media (min-width: 600px) and (max-width: 1023px) { body.gg-marka .ara-liste, body.gg-marka #favListe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; } }
@media (min-width: 768px) and (max-width: 1023px) { body.gg-marka .ara-liste, body.gg-marka #favListe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ödeme/sepet/giriş gövdesi: dokunma alanları ≥44 px, giriş yazısı 16 px (2026-10-27, Mobil_Uyarlama §3, §9). Giriş ve alan etiketleri görünür (mevcut). */
@media (max-width: 1023px) {
  body.gg-marka .al-sayfa button, body.gg-marka .al-sayfa select, body.gg-marka .al-sayfa textarea,
  body.gg-marka .al-sayfa input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 44px; font-size: 16px; }
  body.gg-marka .al-sayfa button { min-width: 44px; }
  body.gg-marka .al-link, body.gg-marka .al-kod-ac, body.gg-marka .al-sil { display: inline-flex; align-items: center; min-height: 44px; }
  body.gg-marka .al-sayfa input[type="checkbox"], body.gg-marka .al-sayfa input[type="radio"] { width: 22px; height: 22px; }
}

/* ---- 2026-10-27, Burak: "gpt web tavsiye" G2 + G3 ----
   G3: sözleşme onayı artık "Siparişi Tamamla"nın hemen üstünde (marka_uret.py taşır); özet kartı içinde nefes payı.
   G2: dar ekranda (≤900 px, style.css'in tek sütuna düştüğü genişlik) sepet sırası: ürünler → sepet özeti/Ödemeye geç → benzer ürünler. DOM sırası değişmez (masaüstü düzeni aynı);
   .al-sol "contents" olur, kartlar ızgaraya doğrudan girer ve order ile dizilir. */
body.gg-marka .al-ozet .al-onay-ust { margin: 14px 0 10px; }
body.gg-marka .al-ozet .al-onay-ust .al-onay-satir { font-size: .84rem; }
@media (max-width: 900px) {
  body.gg-marka #sepetDolu .al-sol { display: contents; }
  body.gg-marka #sepetDolu .al-sol > .al-kart:first-child { order: 1; }
  body.gg-marka #sepetDolu .al-sag { order: 2; }
  body.gg-marka #sepetDolu #benzerKutu { order: 3; }
}