/* ═══════════════════════════════════════════════════════════════════════════
   URUN GALERISI — kullanici istegi 2026-08: "urunleri tanitabilecegimiz,
   telefon tablette guzel sunum yapabilecegimiz bir alan".

   Tasarim notlari:
     • Kose yaricapi HER YERDE 0 (proje kurali).
     • Izgara auto-fill: telefonda 2, tablette 3-4, masaustunde 5-6 kart.
     • Sunum modu tam ekran ve DOKUNMATIK oncelikli: buyuk oklar, genis hedefler.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ‼️ Sayfa govdesi (.page-content) SABIT YUKSEKLIKLI flex sutunu: kabuk da oyle
   olmali, yoksa icerik tasar ve KIRPILIR (kullanici: "alttaki resimleri goremiyorum,
   scroll devreye girmiyor"). Ust bilgi + filtreler sabit, izgara kendi icinde kayar. */
.galeri-shell {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 0;
    box-sizing: border-box;
}
.galeri-ust,
.galeri-filtreler { flex: 0 0 auto; }

.galeri-kaydir {
    flex: 1 1 auto;
    min-height: 0;            /* flex cocugunun kucule bilmesi icin SART */
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
    /* Telefonda parmakla kaydirma akici olsun */
    -webkit-overflow-scrolling: touch;
}

.galeri-ust {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.galeri-baslik { display: flex; align-items: baseline; gap: 10px; }
.galeri-baslik h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.galeri-sayi { font-size: 0.8rem; color: var(--yl-text-light); }

.galeri-arama { margin-left: auto; flex: 1 1 240px; max-width: 380px; }
.galeri-arama input {
    width: 100%; box-sizing: border-box; border-radius: 0;
    border: 1px solid var(--yl-border); padding: 7px 10px; font-size: 0.85rem;
    font-family: inherit;
}

.galeri-filtreler {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--yl-border);
}
.galeri-temizle {
    background: #f1f5f9; border: 1px solid var(--yl-border); border-radius: 0;
    font-size: 0.74rem; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.galeri-sadece-fotolu {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.76rem; cursor: pointer; margin-left: 4px;
}

.galeri-durum { padding: 40px 0; text-align: center; color: var(--yl-text-light); font-size: 0.88rem; }

.galeri-izgara {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.galeri-kart {
    border: 1px solid var(--yl-border); border-radius: 0; background: var(--yl-white);
    cursor: pointer; display: flex; flex-direction: column; overflow: hidden;
    transition: box-shadow 0.12s, transform 0.12s;
}
.galeri-kart:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.14); transform: translateY(-2px); }
.galeri-kapak { aspect-ratio: 4 / 3; background: #f1f5f9; overflow: hidden; }
.galeri-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeri-kapak-bos {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #cbd5e1;
}
.galeri-kart-govde { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.galeri-kart-ust { display: flex; align-items: center; gap: 6px; }
.galeri-kod { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
.galeri-durum-chip {
    margin-left: auto; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; padding: 1px 5px; background: #eef2ff; color: #4f46e5;
    border: 1px solid #c7d2fe; white-space: nowrap;
}
.galeri-tip { font-size: 0.78rem; color: var(--yl-text); }
.galeri-ozet { font-size: 0.72rem; color: var(--yl-text-light); }

.galeri-etiketler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.galeri-etiket {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.66rem; font-weight: 600; padding: 1px 6px;
    background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
}

/* ── SUNUM MODU ── */
.sunum-perde {
    position: fixed; inset: 0; z-index: 2400; background: rgba(15,23,42,0.94);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sunum-icerik {
    position: relative; width: 100%; max-width: 1200px; height: 100%;
    display: flex; flex-direction: column; gap: 10px;
}
/* Kutu yalnizca KLAVYE olaylarini yakalamak icin odaklanabilir (tabindex=0);
   bir kontrol degil, tam ekran kabuk oldugu icin odak halkasi cizilmez.
   Odak halkasi ic kontrollerde (dugme/kutu) normal sekilde gorunmeye devam eder. */
.sunum-icerik:focus,
.sunum-icerik:focus-visible { outline: none; }
.sunum-kapat {
    position: absolute; top: -4px; right: 0; z-index: 3;
    background: none; border: none; color: #fff; font-size: 1.5rem;
    line-height: 1; cursor: pointer; padding: 4px 8px;
}
.sunum-gorsel {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
}
.sunum-gorsel img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform 0.12s ease-out; transform-origin: center center;
}
/* Buyutulmusken imlec "tutulabilir" oldugunu belli etsin. */
.sunum-gorsel img.sunum-img-zoom { cursor: grab; transition: none; }
.sunum-gorsel img.sunum-img-zoom:active { cursor: grabbing; }

/* Zoom araclari — oklarla ayni katmanda ama SAG ALT kosede; ok tuslarini kapatmaz. */
.sunum-zoom-arac {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    display: flex; align-items: center; gap: 2px;
    background: rgba(15,23,42,0.72); padding: 4px;
}
.sunum-zoom-arac button {
    background: rgba(255,255,255,0.14); border: none; color: #fff;
    width: 30px; height: 28px; font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 0;
}
.sunum-zoom-arac button:hover:not(:disabled) { background: rgba(255,255,255,0.3); }
.sunum-zoom-arac button:disabled { opacity: 0.35; cursor: default; }
.sunum-zoom-oran { color: #e2e8f0; font-size: 0.72rem; min-width: 42px; text-align: center; }
.sunum-bekle { color: #cbd5e1; font-size: 0.9rem; }
.sunum-ok {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.14); border: none; color: #fff;
    font-size: 2rem; line-height: 1; cursor: pointer;
    width: 44px; height: 64px; border-radius: 0;
}
.sunum-ok:hover { background: rgba(255,255,255,0.26); }
.sunum-ok-sol { left: 0; }
.sunum-ok-sag { right: 0; }
.sunum-foto-sayac {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    color: #e2e8f0; font-size: 0.74rem; background: rgba(0,0,0,0.4); padding: 2px 8px;
}

.sunum-bilgi {
    flex: 0 0 auto; background: var(--yl-white); border: 1px solid var(--yl-border);
    padding: 10px 14px; max-height: 46vh; overflow-y: auto;
}
.sunum-baslik { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sunum-kod { font-size: 1rem; font-weight: 700; }
.sunum-tip { font-size: 0.85rem; color: var(--yl-text-light); }

.sunum-ozellikler {
    display: grid; gap: 4px 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin-bottom: 10px;
}
.sunum-ozellik { display: flex; gap: 6px; font-size: 0.78rem; }
.sunum-ozellik-ad { color: var(--yl-text-light); min-width: 100px; }
.sunum-ozellik-deger { font-weight: 600; }

.sunum-etiket-alani {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px dashed var(--yl-border);
}
.sunum-etiket button {
    background: none; border: none; color: #047857; cursor: pointer;
    font-size: 0.6rem; padding: 0 0 0 2px; line-height: 1;
}
.sunum-etiket-input {
    border: 1px solid var(--yl-border); border-radius: 0; font-family: inherit;
    font-size: 0.78rem; padding: 4px 8px; min-width: 140px;
}
.sunum-etiket-ekle {
    background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; border-radius: 0;
    font-size: 0.74rem; font-weight: 600; padding: 4px 10px; cursor: pointer;
}
.sunum-etiket-ekle:disabled { opacity: 0.5; cursor: default; }

.sunum-alt {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 8px; border-top: 1px solid var(--yl-border);
}
.sunum-btn {
    background: #fff; border: 1px solid var(--yl-border); border-radius: 0;
    font-size: 0.78rem; padding: 6px 12px; cursor: pointer; font-family: inherit;
}
.sunum-btn:disabled { opacity: 0.45; cursor: default; }
.sunum-btn-ana {
    margin-left: auto; background: #7c3aed; color: #fff; border-color: #7c3aed; font-weight: 600;
}
.sunum-btn-ana:disabled { opacity: 0.6; }
.sunum-konum { font-size: 0.76rem; color: var(--yl-text-light); }
/* Klavye kisayollari — sessiz bir ipucu, dikkat cekmemeli */
.sunum-ipucu {
    font-size: 0.7rem; color: #94a3b8; white-space: nowrap;
    letter-spacing: 0.01em;
}
@media (max-width: 900px) { .sunum-ipucu { display: none; } }   /* dokunmatikte anlamsiz */
.sunum-hata { margin-top: 6px; font-size: 0.76rem; color: #b91c1c; }

/* ── Telefon / tablet ── */
@media (max-width: 768px) {
    .galeri-shell { padding: 10px 10px 20px; }
    .galeri-izgara { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .galeri-arama { margin-left: 0; max-width: none; }
    .sunum-perde { padding: 0; }
    .sunum-icerik { max-width: none; gap: 0; }
    .sunum-bilgi { max-height: 52vh; border-left: none; border-right: none; border-bottom: none; }
    .sunum-ozellikler { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .sunum-btn-ana { margin-left: 0; width: 100%; }
}

/* Koyu tema */
.app-root.dark .galeri-kart { background: #0d1117; border-color: #30363d; }
.app-root.dark .galeri-kapak { background: #161b22; }
.app-root.dark .galeri-arama input,
.app-root.dark .sunum-etiket-input {
    background: #0d1117; border-color: #30363d; color: #e6edf3;
}
.app-root.dark .sunum-bilgi { background: #0d1117; border-color: #30363d; }
.app-root.dark .sunum-btn { background: #161b22; border-color: #30363d; color: #e6edf3; }


/* ── GORUNUM ANAHTARI (arac bazli / tum fotograflar) ───────────────────── */
.galeri-gorunum { display: flex; gap: 0; }
.galeri-gorunum button {
    background: #fff; border: 1px solid var(--yl-border); color: var(--yl-text);
    padding: 5px 12px; font-size: 0.78rem; cursor: pointer; border-radius: 0;
}
.galeri-gorunum button + button { border-left: none; }
.galeri-gorunum button.aktif { background: var(--yl-primary); border-color: var(--yl-primary); color: #fff; }

/* ── DUZ FOTOGRAF IZGARASI ─────────────────────────────────────────────── */
.galeri-izgara-foto {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.galeri-foto-kart {
    position: relative; cursor: pointer; background: #0f172a;
    border: 1px solid var(--yl-border); aspect-ratio: 4 / 3; overflow: hidden;
}
.galeri-foto-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeri-foto-kart:hover { border-color: var(--yl-primary); }
.galeri-foto-kod {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.72); color: #fff;
    font-size: 0.68rem; padding: 3px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.galeri-durum-not { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; padding: 8px 10px; }

/* Telefonda daha kucuk kareler sigsin. */
@media (max-width: 768px) {
    .galeri-izgara-foto { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}


/* ── URETIM LISTESI: fotograf sekmesindeki etiket seridi ───────────────── */
/* Etiket rozetleri galeri ile AYNI gorunsun diye .galeri-etiket burada da kullanilir. */
.uretim-etiket-serit {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 10px; margin-bottom: 10px;
    background: var(--yl-bg-soft, #f8fafc); border: 1px solid var(--yl-border);
}
.uretim-etiket-baslik { font-size: 0.74rem; font-weight: 700; color: var(--yl-text-light); text-transform: uppercase; }
.uretim-etiket-input {
    flex: 1 1 140px; min-width: 120px; max-width: 240px;
    border: 1px solid var(--yl-border); padding: 4px 8px; font-size: 0.8rem; border-radius: 0;
}


/* ── COKLU SECIM + PAYLASIM SETI ───────────────────────────────────────── */
.galeri-kart { position: relative; }
.galeri-kart.secili { outline: 3px solid var(--yl-primary); outline-offset: -3px; }
.galeri-sec {
    position: absolute; top: 6px; left: 6px; z-index: 3;
    background: rgba(255,255,255,0.92); border: 1px solid var(--yl-border);
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.galeri-sec input { margin: 0; cursor: pointer; }

.galeri-toplu-btn {
    background: var(--yl-primary); color: #fff; border: none;
    padding: 6px 14px; font-size: 0.78rem; cursor: pointer; border-radius: 0;
}
.galeri-toplu-btn:disabled { opacity: 0.6; cursor: default; }

/* Sunumda yildiz — SOL UST kose. Sag ustte kapatma carpisinin yanindaydi ve
   kullanici yildiza basmaya calisirken pencereyi kapatiyordu. */
.sunum-yildiz {
    position: absolute; left: 12px; top: 12px; z-index: 4;
    display: flex; align-items: center; gap: 6px;
    background: rgba(15,23,42,0.82); border: 1px solid rgba(255,255,255,0.22);
    color: #f8fafc; padding: 7px 12px 7px 10px;
    font-size: 0.78rem; font-weight: 600; line-height: 1;
    cursor: pointer; border-radius: 0;
}
.sunum-yildiz svg { flex: 0 0 auto; }
.sunum-yildiz:hover { background: rgba(15,23,42,0.95); border-color: #fbbf24; color: #fbbf24; }

/* Isaretliyken ALTIN SARISI ve dolgun — uzaktan (televizyondan) da secilsin. */
.sunum-yildiz.dolu {
    background: #b45309; border-color: #fbbf24; color: #fde68a;
}
.sunum-yildiz.dolu svg { color: #fbbf24; filter: drop-shadow(0 0 3px rgba(251,191,36,0.65)); }
.sunum-yildiz.dolu:hover { background: #92400e; color: #fef3c7; }

/* PDF secenek penceresi */
.pdf-secenek {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 0; font-size: 0.84rem; cursor: pointer;
    border-bottom: 1px solid var(--yl-border);
}
.pdf-secenek input { margin-top: 2px; cursor: pointer; }
.pdf-secenek small { display: block; color: var(--yl-text-light); font-size: 0.74rem; }
.pdf-ozet { margin-top: 10px; font-size: 0.78rem; color: var(--yl-text-light); }


/* PDF penceresi — ilerleme ve hata (eskiden hicbiri gorunmuyordu) */
.pdf-ilerleme {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding: 8px 10px;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 0.78rem;
}
.pdf-spinner {
    width: 13px; height: 13px; flex: 0 0 auto;
    border: 2px solid #bfdbfe; border-top-color: #1e40af; border-radius: 50%;
    animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }
.pdf-hata {
    margin-top: 10px; padding: 8px 10px;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.78rem;
}


/* Galeri kartinda "bu aracin paylasim seti var" rozeti — kullanici hangi araclara
   set tanimladigini listeye bakinca gorsun, tek tek acmasin. */
/* Kucuk sari yildiz rozeti — kartin/karenin SAG UST kosesi.
   Arac kartinda "N fotograf sette", duz gorunumde "bu kare sette" demektir. */
.galeri-set-rozet {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    background: rgba(15,23,42,0.85); color: #fbbf24; border: 1px solid #fbbf24;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; font-size: 0.68rem; font-weight: 700; line-height: 1;
    text-shadow: 0 0 4px rgba(251,191,36,0.55);
    pointer-events: none;   /* karta tiklamayi ENGELLEMESIN */
}

/* Yildiz filtresi kutusu */
.galeri-yildiz-filtre { white-space: nowrap; }
.galeri-yildiz-mini { color: #d97706; font-size: 0.86rem; line-height: 1; }


/* PDF penceresi SUNUMUN da ustunde. .sunum-perde z-index'i 2400; standart modal
   1000'de kaldigi icin pencere sunumun arkasinda ciziliyor ve GORUNMUYORDU. */
.modal-overlay.pdf-perde { z-index: 2600; }