@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap');

/* Herkese açık katalog: ekranda okunaklı, yazdırınca A4. Renkler sitenin
   style.css değişkenleriyle aynı. */
:root{--vurgu:#f27763;--metin:#2f2c27;--soluk:#76736c;--zemin:#f7f7f4;--cizgi:#e8e7e1;--ikincil:#f1f1ed}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--zemin);color:var(--metin);font-family:'Jost',sans-serif;font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}

.arac-cubugu{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 28px;background:#fffffff2;border-bottom:1px solid var(--cizgi);backdrop-filter:blur(6px)}
.arac-cubugu__marka{display:flex;align-items:center;gap:10px;text-decoration:none}
.arac-cubugu__marka span{font-size:11px;font-weight:600;letter-spacing:1.2px;border:1px solid #dbdad1;border-radius:4px;padding:3px 7px}
.arac-cubugu__sag{display:flex;gap:10px}
.dugme{font:inherit;font-weight:500;border:0;border-radius:8px;padding:10px 18px;background:var(--vurgu);color:#2f241f;cursor:pointer;text-decoration:none;white-space:nowrap}
.dugme:hover{background:#ca252c;color:#fff}
.dugme--ikincil{background:var(--ikincil);border:1px solid var(--cizgi)}
.dugme--ikincil:hover{background:#e8e8e0;color:var(--metin)}

.katalog{max-width:1200px;margin:0 auto;padding:28px 28px 60px}
.kapak{background:#fff;border:1px solid var(--cizgi);border-radius:14px;padding:48px;margin-bottom:28px}
.kapak__logo{width:200px;height:auto;margin-bottom:28px}
.etiket{font-size:12px;letter-spacing:2px;color:var(--soluk)}
.kapak h1{font-size:42px;font-weight:500;letter-spacing:-1.2px;line-height:1.12;margin:10px 0 16px}
.kapak__ozet{font-weight:500;margin-bottom:8px}
.kapak__metin{color:var(--soluk);max-width:620px}
.kapak__iletisim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}
.kapak__iletisim a{display:block;text-decoration:none;background:var(--zemin);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--soluk);overflow-wrap:anywhere}
.kapak__iletisim strong{display:block;color:var(--metin);font-weight:500}
.icindekiler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;border-top:1px solid var(--cizgi);padding-top:18px}
.icindekiler a{display:flex;justify-content:space-between;text-decoration:none;padding:6px 0;border-bottom:1px dashed var(--cizgi)}
.icindekiler a span:last-child{color:var(--soluk);font-size:14px}

.bolum{margin-top:36px}
.bolum h2{font-size:28px;font-weight:500;letter-spacing:-.6px;padding-bottom:10px;border-bottom:2px solid var(--metin);margin-bottom:6px}
.bolum h2 small,.bolum h3 small{font-size:14px;font-weight:400;color:var(--soluk);letter-spacing:0;margin-left:6px}
.bolum h3{font-size:19px;font-weight:500;margin:24px 0 12px}
.izgara{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:14px}
.urun{background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:10px;break-inside:avoid}
.urun__gorsel{display:block;width:100%;padding:0;border:0;aspect-ratio:1;background:#f8f5f2;border-radius:7px;overflow:hidden;margin-bottom:9px;cursor:zoom-in}
.urun__gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.urun__gorsel:hover img{transform:scale(1.04)}
.urun__gorsel:focus-visible{outline:3px solid #c55c4b;outline-offset:2px}
.urun__kod{font-size:12px;color:var(--soluk);letter-spacing:.3px}
.urun__ad{font-size:14px;font-weight:500;line-height:1.35;margin-top:2px}

.kapanis{margin-top:44px;background:#222;color:#fff;border-radius:14px;padding:34px 40px}
.kapanis h2{font-size:26px;font-weight:500;margin-bottom:8px}
.kapanis p{color:#e3e3e3;max-width:640px}
.kapanis__baglanti{margin-top:14px;font-weight:500}
.kapanis a{color:#febf76}

/* Ürün modalı */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__perde{position:absolute;inset:0;background:#25261fb3}
.modal__kutu{position:relative;width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:14px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:28px}
.modal__kapat{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:var(--ikincil);font-size:26px;line-height:1;cursor:pointer;color:var(--metin)}
.modal__kapat:hover{background:#e8e8e0}
.modal__ana{aspect-ratio:1;background:#f8f5f2;border-radius:10px;overflow:hidden}
.modal__ana img{width:100%;height:100%;object-fit:contain}
.modal__kucukler{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.modal__kucukler button{width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#f8f5f2;cursor:pointer}
.modal__kucukler button.is-active{border-color:var(--vurgu)}
.modal__kucukler img{width:100%;height:100%;object-fit:cover}
.modal__bilgi{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.modal__bilgi h2{font-size:24px;font-weight:500;line-height:1.25;padding-right:36px}
.modal__seri{display:inline-block;align-self:flex-start;font-size:13px;background:var(--zemin);border-radius:99px;padding:3px 11px;color:var(--soluk)}
.modal__aciklama{color:#4a4741;font-size:15px;line-height:1.6;display:grid;gap:10px}
.modal__bilgi .dugme{align-self:flex-start;margin-top:8px}

@media(max-width:1000px){.izgara{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:768px){
  .arac-cubugu{padding:10px 16px}.arac-cubugu__marka img{width:90px}.arac-cubugu__marka span{display:none}
  .dugme{padding:9px 12px;font-size:14px}
  .katalog{padding:16px 16px 40px}
  .kapak{padding:26px 20px}.kapak h1{font-size:31px}
  .kapak__iletisim{grid-template-columns:1fr}
  .icindekiler{grid-template-columns:1fr}
  .izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bolum h2{font-size:24px}
  .kapanis{padding:26px 22px}
  .modal{padding:0;place-items:end stretch}
  .modal__kutu{grid-template-columns:1fr;gap:16px;padding:18px;border-radius:14px 14px 0 0;max-height:92vh}
  .modal__bilgi h2{font-size:20px}
}

/* Yazdırma / PDF: A4, araç çubuğu yok, her kategori yeni sayfada. */
@page{size:A4;margin:12mm}
@media print{
  body{background:#fff;font-size:11pt}
  .arac-cubugu,.modal{display:none!important}
  .katalog{max-width:none;padding:0}
  /* Kapakta sabit yükseklik YOK: Safari üst/alt bilgi satırları ekleyip
     alanı daralttığında 250 mm'lik kapak taşıyor ve 2. sayfa boş kalıyordu.
     Yeni sayfa kuralı yalnızca bölümlerde (.bolum) — çift kırılım yok. */
  .kapak{border:0;padding:28mm 0 0;margin:0;min-height:0;display:block}
  .kapak__iletisim a{background:#f4f4f0}
  .bolum{margin-top:0;break-before:page}
  /* Kartlar satır içi kutu: tarayıcılar bir satırı iki sayfaya bölmez.
     (Izgara öğelerinde break-inside Safari'de uygulanmıyor, görsel yarıdan
     bölünüyordu.) PDF'te başlık yok, satırda 5 ürün, altta stok kodu. */
  .izgara{display:block;font-size:0;margin-top:8px}
  .urun{display:inline-block;vertical-align:top;width:calc((100% - 28px) / 5);margin:0 6px 6px 0;padding:5px;border-color:#ddd;font-size:9pt;break-inside:avoid;page-break-inside:avoid}
  .urun:nth-child(5n){margin-right:0}
  .urun__gorsel{margin-bottom:4px;border-radius:5px}
  .urun__ad{display:none}
  .urun__kod{text-align:center;font-size:9pt;font-weight:600;color:var(--metin);letter-spacing:.2px}
  .bolum h3{margin:14px 0 4px;font-size:13pt}
  .bolum h3{break-after:avoid}
  .kapanis{break-before:page;background:#fff;color:var(--metin);border:2px solid var(--metin)}
  .kapanis p{color:var(--metin)}
  .kapanis a{color:var(--metin)}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}