/* hemensitem QR panel — tablet ve masaüstü düzeni. Telefon (< 768 px) hiç değişmez: bu dosyadaki her kural min-width
   medya sorgusu içinde (tek istisna sondaki max-width kuralı: yalnız genişte çizilen .menu-iki/.ayar-iki'ye dokunur). Eşik 1024 px genis.js ile aynı (GENIS): üstünde sol kenar menüsü, iki panelli Menü ve Ayarlar.
   - 768–1023: alt sekme çubuğu kalır, sütun genişler.
   - ≥ 1024: kenar menüsü (marka, işletme, plan, sekmeler, Hesap/Çıkış); gökyüzü başlığı içerik sütununda yuvarlak bir
     tabela; Özet/Hedef/QR ızgarada; Menü ve Ayarlar iki panel; giriş iki sütun; kurulum ≈ 720 px.
   panel.css değişkenlerini kullanır; CSP: satır içi stil yok. */

/* =====================================================================
   Tablet: daha geniş sütun
   ===================================================================== */
@media (min-width: 768px) {
  body.uygulama-acik .uygulama { max-width: 800px; }
  .sayfa { --kenar: 32px; }
  .ust-ic { padding: 0 32px; }
  body.uygulama-acik .ozet-baslik h1 { margin-top: 18px; } /* büyük selamın alt uzantıları (ş, ç) adla çakışmasın */
  .pano-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* yönetici panosunun sayı kartları */
}

/* =====================================================================
   Masaüstü
   ===================================================================== */
@media (min-width: 1024px) {
  :root { --kenar-gen: 248px; }

  /* ---------- İskelet: sabit kenar menüsü + içerik ---------- */
  body.uygulama-acik { --dok-yuk: 0px; }
  body.uygulama-acik.is-hapi-acik { --dok-yuk: 76px; } /* Kaydet çubukları sağ alttaki işler hapının üstünde */
  body.uygulama-acik .uygulama { max-width: none; margin: 0; padding-left: var(--kenar-gen); }
  body.uygulama-acik .sayfa {
    --tepe: 0px; --kenar: 40px;
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 40px 48px;
  }

  .kenar {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--kenar-gen);
    display: flex; flex-direction: column; gap: 22px; padding: 20px 14px 16px;
    background: var(--kum); border-right: 1px solid var(--cizgi); overflow-y: auto; overscroll-behavior: contain;
  }
  .kenar .ust-cubuk { position: static; color: var(--murekkep); }
  .kenar .ust-ic { height: auto; padding: 0 4px; display: grid; justify-content: stretch; gap: 14px; }
  .kenar .marka {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: center;
    font-size: 17px; font-weight: 780; font-stretch: 92%; line-height: 1.15;
  }
  .kenar .marka-isaret { grid-row: 1 / 3; }
  .kenar .marka::after { content: "hemensitem QR"; grid-column: 2; color: var(--tas); font-size: 13px; font-weight: 650; font-stretch: 100%; }
  .uygulama .kenar .ust-ad {
    visibility: visible; align-self: end; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .kenar .marka:hover .ust-ad { text-decoration: underline; text-underline-offset: 3px; }
  .kenar .kredi-hap, .kenar .kredi-hap:not(.az) {
    justify-self: start; background: var(--yaprak); color: var(--murekkep-2);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--cizgi-koyu);
  }
  .kenar .kredi-hap .ikon { color: var(--kobalt); }
  .kenar .kredi-hap:hover { box-shadow: inset 0 0 0 1.5px var(--murekkep); }
  .kenar .kredi-hap.az { background: var(--amber-acik); color: var(--amber); box-shadow: none; }
  .kenar .kredi-hap.az .ikon { color: currentColor; }

  .kenar .sekme-cubugu, .kenar .sekme-cubugu.alti {
    position: static; transform: none; width: auto;
    display: flex; flex-direction: column; gap: 4px; padding: 0;
    border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  }
  .kenar .sekme, .kenar .sekme-cubugu.alti .sekme {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    height: 48px; padding: 0 14px; border-radius: 14px;
    color: var(--murekkep-2); font-size: 16px; font-weight: 680;
  }
  .kenar .sekme .ikon { width: 22px; height: 22px; }
  .kenar .sekme span { padding: 0; }
  .kenar .sekme:hover { background: var(--kum-koyu); color: var(--murekkep); }
  .kenar .sekme[aria-current="page"] { background: var(--murekkep); color: #fff; }
  .kenar .sekme:focus-visible { outline-offset: 2px; }

  .kenar-alt { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--cizgi-koyu); }
  .kenar-kisayol {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 14px; background: none; color: var(--tas); font: inherit; font-size: 15px; font-weight: 650;
    text-align: start; text-decoration: none; transition: background-color 160ms ease, color 160ms ease;
  }
  .kenar-kisayol .ikon { width: 20px; height: 20px; }
  .kenar-kisayol:hover { background: var(--kum-koyu); color: var(--murekkep); }
  .kenar-kisayol:disabled { opacity: .5; cursor: default; }

  /* "İçeriğe geç": yalnız klavye odağında görünür */
  .atla {
    position: absolute; z-index: 3; top: 12px; left: 14px; right: 14px; min-height: 44px;
    border: 0; border-radius: 14px; background: var(--murekkep); color: #fff; font-weight: 720;
  }
  .atla:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* bildirim içerik alanının ortasında; işler hapı içerik alanının sağ altında */
  body.uygulama-acik .bildirim { left: calc(50% + var(--kenar-gen) / 2); }
  body.uygulama-acik .is-hapi {
    left: auto; right: 28px; bottom: 24px; width: min(440px, calc(100vw - var(--kenar-gen) - 56px));
    transform: none; animation-name: hap-gir-genis;
  }
  @keyframes hap-gir-genis { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* ---------- Gökyüzü: içerik sütununda yuvarlak tabela (beyaz yaprak yok) ---------- */
  body.uygulama-acik :is(.sayfa > .sayfa-baslik:first-child, .menu-arac > .sayfa-baslik) {
    margin: 0; padding: 40px 44px 44px; border-radius: var(--r-blok);
  }
  body.uygulama-acik :is(.sayfa > .sayfa-baslik:first-child, .menu-arac > .sayfa-baslik)::after { display: none; }
  body.uygulama-acik .sayfa > .ozet-baslik { padding-bottom: 40px !important; }
  body.uygulama-acik .sayfa > .geri-baslik:first-child { padding-top: 24px; }
  body.uygulama-acik .sayfa > .sayfa-baslik:first-child h1 { font-size: 56px; }
  body.uygulama-acik .sayfa > .ozet-baslik:first-child h1 { font-size: 34px; }
  body.uygulama-acik .sayfa > .geri-baslik:first-child h1 { font-size: 48px; }

  /* menü › içe aktar: sihirbaz sütunu ortada, üst satırı tabelanın içinde */
  body.uygulama-acik .sayfa > .sihirbaz-ek { width: 100%; max-width: 760px; margin: 0 auto; }
  body.uygulama-acik .sihirbaz-ek > .sihirbaz-ust { top: 6px; left: 24px; right: 24px; height: 56px; }
  body.uygulama-acik .sihirbaz-ek > .sihirbaz-govde { --tepe: 0px; padding-top: 0; }
  body.uygulama-acik .sihirbaz-ek .sihirbaz-govde > :is(.sayfa-baslik:first-child, .hazir-ust, .bekle) {
    margin: 0; padding: 76px 36px 40px; border-radius: var(--r-blok);
  }
  body.uygulama-acik .sihirbaz-ek .sihirbaz-govde > :is(.sayfa-baslik:first-child, .hazir-ust)::after { display: none; }
  body.uygulama-acik .sihirbaz-ek .sihirbaz-govde > .bekle { min-height: calc(100dvh - 76px); }

  /* menü › içindekiler: ortalanmış sütun, onay kartları iki sütun */
  body.uygulama-acik .sayfa > .ic-sayfa { width: 100%; max-width: 1040px; margin: 0 auto; }
  .ic-ust { padding: 26px; }
  .ic-ust > .kart-giris { max-width: 70ch; }
  .ic-sayac { max-width: 520px; }
  .ic-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---------- Paneldeki başlık (Menü ve Ayarlar'ın sağ paneli) ---------- */
  .panel-baslik { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .panel-baslik h2 { font-size: 34px; line-height: .95; font-weight: 850; font-stretch: var(--dar); letter-spacing: -.004em; overflow-wrap: anywhere; padding-top: 4px; }
  .panel-baslik .ince { margin-top: 8px; max-width: 56ch; }
  .panel-baslik > .ikon-dugme { background: var(--kum); }
  .panel-baslik > .ikon-dugme:hover { background: var(--kum-koyu); }

  /* ---------- Özet: ızgara ---------- */
  body.uygulama-acik .sayfa-ozet:has(> .ozet-baslik) {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: start;
  }
  .sayfa-ozet:has(> .ozet-baslik) > * { grid-column: span 3; }
  .sayfa-ozet > :is(.ozet-baslik, .serit-kap) { grid-column: 1 / -1; }
  .sayfa-ozet > .rapor-kap { display: contents; }
  .sayfa-ozet > .rapor-kap > * { order: 2; grid-column: span 3; }
  .sayfa-ozet > .rapor-kap > .hafta-karti { grid-column: 1 / -1; }
  .sayfa-ozet > .rapor-kap > .donem-karti { grid-column: 1 / -1; }
  .donem-icerik { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .donem-icerik > :not(.urun-bolum) { grid-column: 1; }
  .donem-icerik > .urun-bolum { grid-column: 2; grid-row: 1 / span 6; }
  .donem-icerik > .urun-bolum > .ozet-alt-baslik { margin-top: 4px; }
  .donem-grafik { height: 110px; }
  /* "Şimdi yapılacaklar" ile "Bu hafta için önerim" önde, aynı boyda; öneri yoksa yapılacaklar tam genişlik */
  .sayfa-ozet > :is(.ozet-bolum, .oner-karti, .kisayollar, .one-cikanlar) { align-self: stretch; }
  .sayfa-ozet > .ozet-bolum { display: grid; }
  .sayfa-ozet:not(:has(> .oner-karti)) > .ozet-bolum { grid-column: 1 / -1; }
  .sayfa-ozet > .plan-karti { align-self: start; order: 2; } /* rapor kartlarından sonra, soruların yanında */
  /* Önerilerin etkisi: tam genişlik; solda sonuç, sağda öne çıkardıkların */
  .sayfa-ozet > .etki-kap { grid-column: 1 / -1; }
  .etki-karti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .etki-karti > :is(.kart-baslik, .etki-alt) { grid-column: 1 / -1; }
  .etki-karti > .etki-urun-bolum > .ozet-alt-baslik, .etki-karti > p.etki-urun-bolum { margin-top: 0; }
  .sayfa-ozet .kart:not(.one-cikanlar, .plan-karti) { padding: 26px; }
  .sayfa-ozet .oner-karti:not(.oner-katli) .kart-baslik > .ikon { display: none; }

  /* Bu hafta: solda sayılar + 7 gün, sağda en çok bakılanlar; en yoğun saatler alt satırda geniş */
  .sayfa-ozet .hafta-karti {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 36px; align-items: start;
    grid-template-areas: "baslik baslik" "az az" "sayi urun" "gun urun" "saat saat";
  }
  .sayfa-ozet .hafta-karti:not(:has(> .urun-bolum)) { grid-template-areas: "baslik baslik" "az az" "sayi gun" "saat saat"; }
  .hafta-karti > .kart-baslik { grid-area: baslik; }
  .hafta-karti > .ozet-az { grid-area: az; }
  .hafta-karti > .sayilar { grid-area: sayi; }
  .hafta-karti > .gun-grafik { grid-area: gun; }
  .hafta-karti > .saat-bolum { grid-area: saat; }
  .hafta-karti > .urun-bolum { grid-area: urun; }
  .hafta-karti > .urun-bolum > .ozet-alt-baslik { margin-top: 4px; }
  .hafta-karti .hafta-sayilar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .8fr); }
  .hafta-karti .gun-cubuk { height: 132px; }
  .hafta-karti .saat-grafik { gap: 6px; }
  .hafta-karti .saat-cubuk { height: 120px; border-radius: 8px; }
  .hafta-karti .saat-etiket { font-size: 12.5px; }

  /* Bugün olmayanlar: kategoriler iki sütun */
  .sayfa-ozet .bugun-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  /* ---------- Hedef: solda "Şu an menünde" (yapışkan), sağda işlemler ---------- */
  body.uygulama-acik .sayfa-hedef {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 24px; row-gap: 0; align-items: start;
    grid-template-areas: "baslik baslik" "serit serit" "menude hizli" "menude cumle" "menude oner" "menude ana" "menude bos";
    grid-template-rows: auto auto auto auto auto auto 1fr;
  }
  body.uygulama-acik .sayfa-hedef > .sayfa-baslik:first-child { grid-area: baslik; margin-bottom: 20px; }
  .sayfa-hedef > .serit-kap { grid-area: serit; margin-bottom: 16px; }
  .sayfa-hedef > .hedef-menude {
    grid-area: menude; position: sticky; top: 24px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    overflow-y: auto; border-radius: var(--r-blok);
  }
  .sayfa-hedef > .hedef-hizli { grid-area: hizli; }
  .sayfa-hedef > .hedef-cumle { grid-area: cumle; }
  .sayfa-hedef > .hedef-oner { grid-area: oner; }
  .sayfa-hedef > .hedef-ana { grid-area: ana; }
  .sayfa-hedef > :is(.hedef-hizli, .hedef-cumle, .hedef-oner, .hedef-ana) { margin-bottom: 16px; }
  .sayfa-hedef .hizli > .alt-baslik { margin-top: 0; }
  .sayfa-hedef .hizli-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---------- QR: solda seçenekler, sağda büyük önizleme ---------- */
  /* masa kartı kabı (.qr-masa) ve altında tam genişlikte fiyat listesi: yapışkan önizleme kendi kabında kalır */
  body.uygulama-acik .sayfa-qr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; grid-template-areas: "baslik" "serit" "masa" "fiyat"; }
  body.uygulama-acik .sayfa-qr > .sayfa-baslik:first-child { grid-area: baslik; margin-bottom: 20px; }
  .sayfa-qr > .serit-kap { grid-area: serit; margin-bottom: 16px; }
  .sayfa-qr > .qr-masa {
    grid-area: masa; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 28px; row-gap: 0; align-items: start;
    grid-template-areas: "ayar sahne" "eylem sahne" "adres sahne" "yalniz sahne" "bos sahne";
    grid-template-rows: auto auto auto auto 1fr;
  }
  .qr-masa > .qr-sahne { grid-area: sahne; position: sticky; top: 24px; padding: 40px 28px 28px; }
  .qr-masa > .mk-ayar { grid-area: ayar; }
  .qr-masa > .mk-eylemler { grid-area: eylem; }
  .qr-masa > .dugme-satiri { grid-area: adres; }
  .qr-masa > .kart:not(.mk-ayar) { grid-area: yalniz; }
  .qr-masa > :is(.mk-ayar, .mk-eylemler, .dugme-satiri, .kart) { margin-bottom: 16px; }
  .sayfa-qr > .fl-bolum { grid-area: fiyat; margin-top: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 28px; align-items: start; }
  .sayfa-qr .fl-onizleme { position: sticky; top: 24px; max-height: calc(100vh - 48px); }
  .sayfa-qr .mk-onizleme { width: min(400px, 100%); }
  .sayfa-qr .mk-onizleme[data-boyut="cadir"] { width: 100%; max-width: 640px; }
  .sayfa-qr .mk-onizleme[data-boyut="yuvarlak"] { width: min(360px, 84%); }

  /* ---------- Menü: iki panel ----------
     Sayfa ekran yüksekliğinde; liste ve düzenleme paneli ayrı ayrı kayar (Kaydet çubuğu hep görünür). */
  body.uygulama-acik .sayfa-menu:has(> .menu-iki) { height: 100vh; height: 100dvh; padding-bottom: 24px; }
  body.uygulama-acik.is-hapi-acik .sayfa-menu:has(> .menu-iki) { padding-bottom: 100px; } /* işler hapı panellerin altında */
  body.uygulama-acik:has(.sayfa-menu > .menu-iki) { padding-bottom: 0; }
  body.uygulama-acik .sayfa-menu > .menu-arac > .sayfa-baslik { padding: 26px 36px 28px; }
  body.uygulama-acik .sayfa-menu > .menu-arac > .sayfa-baslik h1 { font-size: 46px; }
  .menu-iki { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; }
  .menu-sol { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 6px 24px 2px; margin-left: -2px; }
  .menu-sol-arac { position: sticky; top: 0; z-index: 3; display: grid; gap: 10px; padding: 2px 0 10px; background: var(--yaprak); }
  .menu-sol-arac:empty { display: none; }
  .menu-sol-arac .menu-not { margin: 0 6px; }
  .menu-sol .urun-satir { transition: box-shadow 160ms ease, background-color 160ms ease; }
  .menu-sol .urun-satir.secili { background: var(--yaprak); box-shadow: inset 0 0 0 2.5px var(--murekkep); }

  .menu-sag {
    position: relative; min-width: 0; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px; padding: 0 22px;
    border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-blok); background: var(--yaprak);
    scroll-padding: 90px 0 110px;
  }
  .menu-sag > :first-child { margin-top: 22px; }
  .menu-sag > :last-child:not(.alt-cubuk) { margin-bottom: 22px; }
  .menu-sag > .panel-baslik {
    position: sticky; top: 0; z-index: 4; margin: 0 -22px; padding: 22px 22px 12px;
    background: var(--yaprak);
  }
  .menu-sag > .kart { padding: 22px 20px; }
  body.uygulama-acik .menu-sag > .alt-cubuk { bottom: 0; margin: 0 -22px; padding: 18px 22px 20px; }
  .menu-sag-bos { display: grid; justify-items: center; gap: 10px; padding: 36px 16px 20px; text-align: center; }
  .menu-sag-bos h2 { font-size: 30px; line-height: .98; font-weight: 840; font-stretch: var(--dar); max-width: 14em; }
  .menu-sag-bos .ince { max-width: 44ch; }
  .menu-sag-baslik { margin: 10px 2px -2px; font-size: 22px; line-height: 1; font-weight: 820; font-stretch: var(--dar); }

  /* ---------- Ayarlar: solda dizin, sağda alt sayfa ---------- */
  .ayar-iki { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .ayar-sol { position: sticky; top: 24px; display: grid; gap: 18px; }
  .ayar-sol .ayar-satir[aria-current="page"] { background: var(--yaprak); box-shadow: inset 0 0 0 2px var(--murekkep); }
  .ayar-sol .ayar-satir[aria-current="page"] .ayar-satir-ok { color: var(--murekkep); }
  .ayar-sol .ayar-alt-not { padding: 0 8px; }
  .ayar-sag { min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
  .ayar-sag > .panel-baslik { margin: 0 4px 4px; }
  body.uygulama-acik .ayar-sag .alt-cubuk { margin-inline: 0; padding-inline: 0; }
  /* Paketim: paket ve dönem kartları yan yana, kart formu daha uzun (çerçeve kendi içinde kayar) */
  .paket-secim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .odeme-cerceve { height: 720px; }

  /* ---------- Yönetici: işletmeler iki sütun; pano tabloları iki sütun ---------- */
  .yonetici-liste { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); align-items: start; }
  .pano-arac { grid-template-columns: 260px 1fr; align-items: center; }
  .pano-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  /* ---------- Pencereler: ortada; ürün seçiciler daha çok sütun ---------- */
  .pencere.hs-pencere { width: min(880px, calc(100vw - 48px)); }
  .hs-pencere .hs-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pencere.secici-pencere { width: min(820px, calc(100vw - 48px)); }
  .secici-pencere .secici-grup { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .secici-pencere .secici-baslik { grid-column: 1 / -1; }

  /* ---------- Giriş / kayıt: solda gökyüzü ve vaat, sağda form ---------- */
  .giris-sayfa { flex-direction: row; align-items: stretch; padding: 0; background: var(--yaprak); }
  .giris-gok {
    flex: 1 1 auto; width: auto; max-width: none; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: flex-start; padding: 32px 56px 64px; overflow: hidden;
    background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 62%, var(--gok-3) 100%);
  }
  .giris-gok::before { top: -60px; right: -50px; width: 220px; height: 220px; }
  .giris-vaat { margin-top: auto; max-width: 7.5em; font-size: clamp(88px, 8.4vw, 132px); }
  .giris-gok-alt { margin-top: 18px; max-width: 32ch; font-size: 20px; }
  .giris-kutu {
    flex: 0 0 min(560px, 46%); width: auto; margin: 0; padding: 48px 56px;
    border-radius: 0; box-shadow: none; align-content: center;
  }

  /* ---------- Kurulum sihirbazı: ortada rahat genişlik, yöntem kartları ızgarada ---------- */
  body[data-mod="kurulum"] .uygulama { max-width: 760px; }
  body[data-mod="kurulum"] .sihirbaz { --kenar: 32px; max-width: 760px; }
  .yontem-listesi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yontem-karti[data-yontem="foto"] { grid-column: span 2; grid-row: span 2; }
  .yontem-karti[data-yontem="foto"] .yontem-ikon { width: 190px; height: 190px; top: -24px; right: -20px; }
  .yontem-karti[data-yontem="foto"] .yontem-metin b { font-size: 40px; }
  @media (hover: hover) {
    .yontem-karti:hover .yontem-ikon { transform: rotate(-8deg) scale(1.06); }
  }
}

/* 1024–1279: kenar menüsü ve kenar boşlukları biraz daha dar (iki panele yer kalsın) */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --kenar-gen: 224px; }
  body.uygulama-acik .sayfa { --kenar: 28px; padding: 24px 28px 40px; }
  body.uygulama-acik .sayfa-menu:has(> .menu-iki) { padding-bottom: 20px; }
  .menu-iki { gap: 20px; }
  .ayar-iki { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 24px; }
}


@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  body.uygulama-acik .is-hapi { animation: none; }
  .menu-sol .urun-satir, .kenar-kisayol { transition: none; }
}

/* Kaydedilmemiş değişiklik varken 1024 px'in altına inilirse (ör. tablet yataydan dikeye) sayfa yeniden çizilmez
   (panel.js): iki panelli sayfada yalnız açık form kalır, liste/dizin gizlenir. Form kapanınca ya da kaydedilince
   sayfa dar düzende çizilir. Telefonda bu sınıflar hiç oluşmaz. */
@media (max-width: 1023.98px) {
  .menu-iki > .menu-sol, .ayar-iki > .ayar-sol { display: none; }
}