/* =====================================================================
   BASIYOZ — TEMA 2026 "Matbaa Atölyesi"
   Yalnız görünüm; arama, sepet, sipariş, fiyat, SEO aynen.
   Geri almak: inc/layout.php'deki tema-2026.css satırını silmek yeterli.
   Esinlenme: ödüllü e-ticaret/SaaS bento düzenleri, unitedcarriers (yığılan bölüm,
   dev rakam), crl (editoryal numara), noth.in (parantez etiket), huyml (perde).
   ===================================================================== */
:root{--t-r:30px;--t-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--t-ease:cubic-bezier(.2,.7,.2,1);
  --t-c:#E3F4FE;--t-m:#FFE3F1;--t-y:#FFF4CF;--t-k:#E8EAF0}
@view-transition{navigation:auto}
html::before{height:4px}

/* 1. Sayfa geçişi: CMYK perde */
@keyframes t-perde-gir{from{clip-path:inset(100% 0 0 0 round 48px 48px 0 0)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes t-perde-cik{to{opacity:.35;transform:scale(.95) translateY(-3%)}}
::view-transition-old(root){animation:t-perde-cik .6s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:t-perde-gir .65s cubic-bezier(.76,0,.24,1) both}

/* 2. Zemin: kâğıt + nokta ızgara */
body{background-color:var(--kagit);background-image:radial-gradient(rgba(3,16,37,.07) 1px,transparent 1.2px);background-size:22px 22px}

/* 3. Duyuru şeridi: mono */
.duyuru{font-family:var(--t-mono);font-size:12px;letter-spacing:.06em;font-weight:500}
.duyuru .kap > span:first-child::before{content:"● ";color:var(--magenta)}

/* 4. Başlık: yüzen kart */
.ust{top:10px;margin:10px 14px 0;border:1px solid var(--cizgi);border-radius:26px;background:transparent!important;isolation:isolate;
  box-shadow:0 20px 50px -30px rgba(3,16,37,.35)}
/* cam efekti pseudo öğede: header'da backdrop-filter olsa sabit açılır menüler header'a hapsolurdu */
.ust::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.ara input{border:2px solid var(--murekkep)!important;background:#fff!important;height:50px!important;border-radius:999px!important;font-weight:600}
.ara button{width:40px!important;height:40px!important;background:var(--magenta)!important}
.kat-menu{border-top:1px dashed var(--cizgi)}
.kat-link{border-radius:999px;padding:9px 10px!important;font-size:13.5px!important;margin-block:6px;border-bottom:0!important;transition:background .2s,color .2s}
.kat-link:hover,.kat-oge:hover > .kat-link{background:var(--murekkep);color:#fff!important}

/* 5. Hero kaydırıcı: çerçeveli dev kart + kayıt işaretleri */
.slider{margin:18px 14px 0;border-radius:40px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(3,16,37,.55);isolation:isolate}
.slider::after{content:"";position:absolute;inset:16px;pointer-events:none;z-index:5;opacity:.55;
  background:
    linear-gradient(var(--murekkep),var(--murekkep)) 0 9px/20px 1.5px,linear-gradient(var(--murekkep),var(--murekkep)) 9px 0/1.5px 20px,
    linear-gradient(var(--murekkep),var(--murekkep)) 100% 9px/20px 1.5px,linear-gradient(var(--murekkep),var(--murekkep)) calc(100% - 9px) 0/1.5px 20px,
    linear-gradient(var(--murekkep),var(--murekkep)) 0 calc(100% - 9px)/20px 1.5px,linear-gradient(var(--murekkep),var(--murekkep)) 9px 100%/1.5px 20px,
    linear-gradient(var(--murekkep),var(--murekkep)) 100% calc(100% - 9px)/20px 1.5px,linear-gradient(var(--murekkep),var(--murekkep)) calc(100% - 9px) 100%/1.5px 20px;
  background-repeat:no-repeat}
.slider-ok{width:54px!important;height:54px!important;background:#fff!important;border:2px solid var(--murekkep)!important;box-shadow:none!important}

/* 6. Güven kutusu: renkli bento */
.guven-kutu{gap:12px!important;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}
.guven-kutu > div{border-radius:22px!important;border:0!important;padding:22px 24px!important;box-shadow:none!important}
.guven-kutu > div:nth-child(4n+1){background:var(--t-c)!important}
.guven-kutu > div:nth-child(4n+2){background:var(--t-m)!important}
.guven-kutu > div:nth-child(4n+3){background:var(--t-y)!important}
.guven-kutu > div:nth-child(4n+4){background:var(--t-k)!important}

/* 7. Bölüm başlıkları: dev + numaralı */
main{counter-reset:t-blok}
.blok-bas{counter-increment:t-blok;border-bottom:2px solid var(--murekkep);padding-bottom:16px;margin-bottom:28px!important;position:relative}
.blok-bas h2{font-size:clamp(34px,4.6vw,68px)!important;letter-spacing:-.045em!important;line-height:.95!important}
.blok-bas::before{content:"(" counter(t-blok,decimal-leading-zero) ")";position:absolute;right:0;top:-30px;font:500 13px/1 var(--t-mono);color:var(--magenta);letter-spacing:.08em}
.blok-link{font-family:var(--t-mono);font-size:13px!important;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--murekkep);
  color:var(--murekkep)!important;padding:10px 16px;border-radius:999px;transition:background .2s,color .2s}
.blok-link:hover{background:var(--murekkep);color:#fff!important;text-decoration:none!important}

/* 8. Kategori karoları: CMYK renk döngüsü */
.kat-izgara{gap:14px!important}
.kat-kart{box-shadow:none!important;border-radius:24px!important;border:1px solid transparent}
.kat-kart:nth-child(4n+1){background:var(--t-c)}
.kat-kart:nth-child(4n+2){background:var(--t-m)}
.kat-kart:nth-child(4n+3){background:var(--t-y)}
.kat-kart:nth-child(4n+4){background:var(--t-k)}
.kat-kart:hover{border-color:var(--murekkep);box-shadow:6px 6px 0 var(--murekkep)!important;transform:translate(-3px,-3px)!important}
.kat-kart-gorsel{border-radius:16px!important;background:#fff!important}
.kat-kart-ok{background:#fff!important}

/* 9. Ürün kartları: neo-brutal gölge */
.urun-izgara{gap:20px!important}
.kart{box-shadow:none!important;border:1.5px solid var(--murekkep);border-radius:26px!important;transition:transform .25s var(--t-ease),box-shadow .25s var(--t-ease)!important}
.kart:hover{transform:translate(-4px,-4px)!important;box-shadow:8px 8px 0 var(--magenta)!important}
.kart-gorsel{background:var(--kagit-2)!important;margin:8px 8px 0;border-radius:19px;overflow:hidden}
.kart-fiyat b{display:inline-block;background:var(--murekkep);color:#fff;padding:4px 12px;border-radius:999px;font-size:17px!important}
.kart-rozet{font-family:var(--t-mono);font-size:11px!important;letter-spacing:.06em}

/* 10. Adımlar: mürekkep zemin, dev kontur numaralar */
.adimlar-blok{margin:72px 14px 0;border-radius:40px;padding:72px 0!important;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:80px 80px}
.adimlar-blok h2{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.045em}
.adimlar li{position:relative;padding:26px 22px 30px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:24px;min-height:220px;overflow:hidden;
  transition:background .3s}
.adimlar li:hover{background:rgba(250,1,112,.12)}
.adimlar li::before{position:absolute;right:10px;bottom:-26px;font:800 150px/1 var(--baslik)!important;letter-spacing:-.06em;
  color:transparent!important;-webkit-text-stroke:1.5px rgba(249,189,1,.55)}
.adimlar li b{font-size:22px!important;margin-top:auto}

/* 11. Teklif şeridi */
.teklif-serit{border-radius:40px!important;padding:56px 56px!important}
.teklif-serit h2{font-size:clamp(30px,3.6vw,52px)!important;letter-spacing:-.04em}

/* 12. Alt bilgi: yığılan kart */
footer.alt{border-radius:40px 40px 0 0;margin-top:-40px;position:relative}
.dk-bant{border-radius:40px 40px 0 0;padding-bottom:calc(clamp(22px,4.2vw,58px) + 40px)!important}

/* 13. Mobil */
@media (max-width:760px){
  .ust{margin:8px 8px 0;top:8px;border-radius:20px}
  .slider{margin:12px 8px 0;border-radius:26px}
  .slider::after{inset:10px}
  .adimlar-blok{margin-inline:8px;border-radius:28px;padding:48px 0!important}
  .adimlar li{min-height:150px}
  .adimlar li::before{font-size:110px!important}
  .teklif-serit{padding:32px 24px!important;border-radius:28px!important}
  .blok-bas::before{top:-22px}
  .kart:hover,.kat-kart:hover{transform:none!important;box-shadow:none!important}
}
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} }