/* ═══════════════════════════════════════════════════════════════════
   MOBİL ÜRÜN SAYFASI — BAĞIMSIZ APP TASARIMI
   Masaüstü hiç etkilenmez (sadece ≤900px)
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* ── 1. SAYFA ZEMİNİ: uygulama gibi açık gri ── */
  html body, body.shop-body{background:#f4f3f0!important}
  section.product.wrap{
    width:100%!important;max-width:100%!important;
    padding:0!important;margin:0!important;
    display:flex!important;flex-direction:column!important;
    gap:0!important;background:#f4f3f0;
  }

  /* ── 2. GALERİ: tam genişlik, beyaz kart, oval köşe yok ── */
  section.product > .gallery{
    order:1;width:100%!important;margin:0!important;
    background:#fff;padding:0 0 12px;
    border-radius:0 0 24px 24px;
    box-shadow:0 2px 14px rgba(0,0,0,.05);
  }
  section.product .gmain{
    border-radius:20px!important;background:#f4f3f0!important;
    margin:8px 12px 0!important;width:calc(100% - 24px)!important;padding:0!important;
    aspect-ratio:1/1!important;height:auto!important;
    display:block!important;
    overflow:hidden!important;
  }
  section.product .gmain img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;padding:0!important;
    border-radius:20px!important;
    display:block!important;
  }
  /* küçük resimler: yuvarlak kapsül şerit */
  section.product .gthumbs{
    display:flex!important;gap:8px!important;
    overflow-x:auto!important;padding:10px 16px 2px!important;
    margin:0!important;scrollbar-width:none;
    grid-template-columns:none!important;
  }
  section.product .gthumbs::-webkit-scrollbar{display:none}
  section.product .gthumbs img{
    width:54px!important;height:54px!important;flex:0 0 54px!important;
    max-height:none!important;border-radius:14px!important;
    border:2px solid #eee!important;object-fit:cover!important;
    background:#faf9f7;
  }
  section.product .gthumbs img.on{border-color:#1d1d1f!important}

  /* ── 3. ÜRÜN ADI: büyük, sıkı, kart içinde ── */
  section.product .p-title-mob{
    order:2;display:block!important;box-sizing:border-box!important;
    font:800 21px/1.25 'Figtree','Inter',-apple-system,sans-serif!important;
    letter-spacing:-.025em!important;
    color:#14110e!important;
    margin:14px 0 0!important;padding:0 12px!important;
    text-align:center!important;
    display:block!important;
    align-self:stretch!important;
    width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }
  section.product .desc{text-align:center!important;align-self:stretch!important;width:100%!important;box-sizing:border-box!important;margin:6px 0 0!important;padding:0 12px!important}
  section.product .rating{text-align:center!important;align-self:stretch!important;justify-content:center!important}
  section.product .p-title-desk{display:none!important}
  section.product .desc{
    order:3;font:400 13px/1.5 'Figtree',sans-serif!important;
    color:#7a7268!important;margin:6px 16px 0!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  section.product .rating{
    order:4;margin:8px 16px 0!important;font:600 12px/1 sans-serif!important;
    color:#8a8073!important;
  }
  section.product .min-note{display:none!important}

  /* ── 4. BİLGİ TABLOSU: yatay kaydırmalı çipler ── */
  section.product .pmeta{
    order:5;margin:14px 12px 0!important;padding:0!important;
    width:calc(100% - 24px)!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;overflow:visible!important;
    border:0!important;box-sizing:border-box!important;
  }
  section.product .pmeta > div{
    display:flex!important;flex-direction:column!important;
    gap:3px!important;background:#fff!important;
    border:1px solid #ece8e1!important;border-radius:12px!important;
    padding:9px 12px!important;min-width:0!important;
    grid-template-columns:none!important;
  }
  section.product .pmeta > div span{
    font:700 9px/1 sans-serif!important;letter-spacing:.06em!important;
    text-transform:uppercase!important;color:#a99e8f!important;
  }
  section.product .pmeta > div b{
    font:700 12px/1.1 sans-serif!important;color:#2b2620!important;
  }

  /* ── 5. FİYAT KARTI: beyaz yüzen kart ── */
  section.product > .pside{
    order:6;margin:14px 12px 0!important;
    width:calc(100% - 24px)!important;box-sizing:border-box!important;
  }
  section.product.wrap .pside .pside-card, section.product .pside-card{
    background:#fff!important;border:0!important;border-radius:20px!important;
    padding:16px!important;box-shadow:0 3px 18px rgba(0,0,0,.06)!important;
  }
  .pside .ps-lab{display:none!important}

  section.product .pside-price{
    margin:0 0 4px!important;gap:8px!important;
    align-items:baseline!important;flex-wrap:wrap!important;
  }
  section.product .pside-price b,
  section.product #pPrice b{
    font-family:'Figtree',-apple-system,sans-serif!important;
    font-size:34px!important;font-weight:900!important;
    line-height:1!important;letter-spacing:-.035em!important;
  }
  section.product .pside-price s{font-size:14px!important;color:#b0a698!important}
  section.product .pside-price em{
    font:800 10px/1 sans-serif!important;padding:4px 7px!important;
    border-radius:6px!important;
  }

  .pside-stock{
    display:inline-flex!important;align-items:center!important;gap:6px!important;
    background:#eef8f1!important;border:0!important;border-radius:8px!important;
    padding:5px 9px!important;margin:8px 0 14px!important;
    font:700 10.5px/1 sans-serif!important;color:#1d7a42!important;width:auto!important;
  }
  .pside-stock i{width:6px!important;height:6px!important;border-radius:50%!important;background:#22a552!important}
  .pside-stock.yok{background:#fdeeee!important;color:#c0392b!important}
  .pside-stock.yok i{background:#c0392b!important}

  /* ── 6. ADET + SEPETE EKLE: uygulama butonu gibi ── */
  .product .pside .buy-row{
    display:flex!important;flex-direction:row!important;
    gap:9px!important;align-items:stretch!important;margin:0!important;
  }
  .pside .qty-add{margin:0!important;width:auto!important;flex:0 0 auto!important}
  .pside .qty-add label{display:none!important}
  .pside .qty-step{
    display:flex!important;align-items:center!important;
    background:#f4f3f0!important;border:0!important;border-radius:14px!important;
    height:50px!important;padding:0!important;gap:0!important;
  }
  .pside .qty-step .qbtn{
    width:40px!important;height:48px!important;flex:0 0 40px!important;
    font-size:19px!important;font-weight:600!important;
    background:transparent!important;border:0!important;color:#14110e!important;
  }
  .pside .qty-step input{
    width:42px!important;height:48px!important;
    text-align:center!important;
    font:800 15px/1 'Figtree',sans-serif!important;
    border:0!important;background:transparent!important;color:#14110e!important;
  }
  section.product .pside .buy-row .btn.big,
  section.product button#addBtn.btn.big{
    flex:1 1 auto!important;width:auto!important;height:50px!important;
    border-radius:14px!important;border:0!important;
    background:#14110e!important;background-image:none!important;
    color:#fff!important;
    font:800 13px/1 'Figtree',sans-serif!important;
    letter-spacing:.02em!important;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.5)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:8px;
  }
  section.product .pside .buy-row .btn.big:active{transform:scale(.97)}

  /* ── 7. GÜVEN: yatay kayan küçük kartlar ── */
  .pside-guvence{
    display:flex!important;gap:8px!important;margin-top:12px!important;
    overflow-x:auto!important;scrollbar-width:none;
    grid-template-columns:none!important;
  }
  .pside-guvence::-webkit-scrollbar{display:none}
  .pside-guvence > div{
    flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:7px!important;
    background:#f8f6f2!important;border:0!important;border-radius:11px!important;
    padding:9px 12px!important;
  }
  .pside-guvence em{font:700 10.5px/1.2 sans-serif!important;color:#5c5346!important;white-space:nowrap}

  /* ── 8. ÖNE ÇIKANLAR: app kartı ── */
  section.product .pinfo-note{
    order:7;margin:12px 12px 0!important;width:calc(100% - 24px)!important;box-sizing:border-box!important;padding:16px!important;
    background:#fff!important;border:0!important;border-radius:20px!important;
    box-shadow:0 3px 18px rgba(0,0,0,.05)!important;
    display:block!important;
  }
  section.product .pinfo-note > span{
    display:none!important;
  }
  section.product .pinfo-note b{
    display:block!important;font:800 11px/1 sans-serif!important;
    letter-spacing:.08em!important;text-transform:uppercase!important;
    color:#a99e8f!important;margin-bottom:10px!important;
  }
  section.product .pinfo-note ul{
    display:flex!important;flex-direction:column!important;gap:9px!important;
    margin:0!important;padding:0!important;list-style:none!important;
  }
  section.product .pinfo-note li{
    display:flex!important;align-items:flex-start!important;gap:9px!important;
    font:500 13px/1.45 sans-serif!important;color:#2b2620!important;
  }
  section.product .pinfo-note li::before{
    content:'✓';flex:0 0 18px;height:18px;border-radius:50%;
    background:#e8f5ec;color:#1d7a42;
    display:grid;place-items:center;font-size:10px;font-weight:900;
  }

  /* ── 9. AKSİYONLAR: yan yana iki buton ── */
  section.product .pinfo-actions{
    order:8;margin:10px 12px 0!important;width:calc(100% - 24px)!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;
  }
  section.product .pinfo-actions .pbtn-wish{
    height:46px!important;border-radius:14px!important;
    background:#fff!important;border:0!important;
    box-shadow:0 2px 10px rgba(0,0,0,.05)!important;
    font:700 11.5px/1 sans-serif!important;color:#2b2620!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:6px;padding:0 8px!important;text-align:center;line-height:1.2;
  }

  /* ── 10. SEKMELER: sticky kapsül ── */
  section.product.wrap.pd-tabs,
  .pd-tabs{
    width:100%!important;max-width:100%!important;
    margin:18px 0 0!important;padding:0!important;
    background:#f4f3f0!important;
  }
  .pd-tabbar{
    display:flex!important;gap:6px!important;
    justify-content:flex-start!important;
    margin:0 12px 12px!important;padding:5px!important;
    background:#fff!important;border:0!important;
    border-radius:14px!important;
    box-shadow:0 2px 10px rgba(0,0,0,.05)!important;
    overflow-x:auto!important;
  }
  .pd-tab{
    flex:1 1 auto!important;
    padding:10px 12px!important;
    border:0!important;border-radius:10px!important;
    font:700 11px/1 sans-serif!important;
    letter-spacing:.02em!important;text-transform:none!important;
    color:#8a8073!important;background:transparent!important;
    margin:0!important;white-space:nowrap!important;
  }
  .pd-tab.on{
    background:#14110e!important;color:#fff!important;
    border:0!important;
  }
  .pd-desc{
    margin:0 12px!important;width:calc(100% - 24px)!important;box-sizing:border-box!important;padding:18px!important;
    background:#fff!important;border:0!important;
    border-radius:20px!important;
    box-shadow:0 3px 18px rgba(0,0,0,.05)!important;
    font:400 13.5px/1.7 sans-serif!important;
    color:#3a342c!important;
  }

  /* ── 11. alt boşluk (alt menü için) ── */
  section.product.wrap{padding-bottom:24px!important}
}

/* ═══ RESİM BÜYÜTME (lightbox) — tüm ekranlar ═══ */
.oc-zoom{
  position:fixed;inset:0;z-index:9999;
  background:rgba(12,10,8,.94);
  display:none;align-items:center;justify-content:center;
  padding:16px;opacity:0;transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.oc-zoom.on{display:flex;opacity:1}
.oc-zoom img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;border-radius:14px;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.8);
  animation:ocZoomIn .26s cubic-bezier(.34,1.3,.64,1);
}
@keyframes ocZoomIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.oc-zoom-close{
  position:absolute;top:14px;right:14px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  border:1px solid rgba(255,255,255,.2);
  transition:.18s;
}
.oc-zoom-close:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)}
.oc-zoom-nav{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:7px 12px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.oc-zoom-nav button{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.16);border:0;color:#fff;
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.16s;
}
.oc-zoom-nav button:hover{background:rgba(255,255,255,.3)}
.oc-zoom-sayac{
  color:#fff;font:700 12px/1 'Figtree',sans-serif;
  letter-spacing:.05em;min-width:44px;text-align:center;opacity:.9;
}
/* tek resim varsa okları gizle */
.oc-zoom[data-tek="1"] .oc-zoom-nav{display:none}

/* tıklanabilir ipucu */
section.product .gmain{cursor:zoom-in}
section.product .gthumbs img{cursor:zoom-in}
@media(max-width:900px){
  .oc-zoom{padding:0}
  .oc-zoom img{border-radius:0;max-width:100vw;max-height:100vh}
  .oc-zoom-close{top:10px;right:10px;width:38px;height:38px;font-size:23px}
}
