/* ============================================================
   dersmetre — LANDING (katalog) sayfasina ozel stiller.
   pazarlama.css'in USTUNE yuklenir (jetonlar, .btn, .frame, .feat,
   .sec-head, .rv oradan gelir). Yalniz Views/Welcome/Index.cshtml kullanir;
   diger pazarlama sayfalari bu dosyayi yuklemez.
   Tailwind/gulp YOK — elle yazilir, publish'e dogrudan girer.
   ============================================================ */

:root {
    --yesil:#1e4d3a;            /* urunun kendi rengi: yalniz ekran cercevesi/rozet vurgusu */
    --altin:#b8860b;
    --gölge:0 30px 60px -28px rgba(28,41,85,.38), 0 8px 20px -12px rgba(0,0,0,.14);
}

/* ---------- ortak kucuk parcalar ---------- */
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.kicker::before { content:''; width:22px; height:2px; background:var(--brand); border-radius:2px; }
.sec-head.sol { text-align:left; margin-left:0; max-width:720px; }
.sec-head.sol h2 { margin-top:14px; }
.sec-head .kicker { justify-content:center; }
.sec-head.sol .kicker { justify-content:flex-start; }
.ipucu { font-size:13px; color:var(--ink-soft); }
.rozet { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border); }
.rozet.yesil { background:color-mix(in srgb,var(--ok) 12%,transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent); }
.rozet.navy { background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand); border-color:color-mix(in srgb,var(--brand) 22%,transparent); }
.rozet.altin { background:color-mix(in srgb,var(--altin) 12%,transparent); color:#7a5a06; border-color:color-mix(in srgb,var(--altin) 30%,transparent); }

/* Ekran goruntusu cercevesi: pazarlama.css .frame + burada ekran ici hafif ust bar */
.frame picture, .frame img, .frame video { display:block; width:100%; height:auto; }
.frame.kucuk .bar { padding:8px 11px; }
.frame.kucuk .bar i { width:9px; height:9px; }

/* ============================================================
   HERO
   ============================================================ */
.hero.katalog { padding:56px 0 30px; overflow:hidden; }
.hero.katalog .hero-grid { grid-template-columns:1fr 1.15fr; gap:44px; }
.hero.katalog h1 { font-size:clamp(34px,4.4vw,58px); }
.hero.katalog h1 em { font-style:normal; color:var(--brand); position:relative; white-space:nowrap; }
.hero.katalog h1 em::after { content:''; position:absolute; left:0; right:0; bottom:.04em; height:.28em; background:color-mix(in srgb,var(--altin) 32%,transparent); z-index:-1; border-radius:4px; }
.hero.katalog p.lead { max-width:44ch; }
.hero-proof { display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:26px; }
.hero-proof .rozet { background:var(--surface); }
.hero-proof .rozet svg { width:14px; height:14px; color:var(--ok); }

.sahne { position:relative; }
.sahne .frame { transform:perspective(1800px) rotateY(-5deg) rotateX(1deg); transform-origin:left center; }
.yuzen { position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--gölge); padding:12px 14px; display:flex; gap:11px; align-items:flex-start; max-width:290px; z-index:2; }
.yuzen .ikon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.yuzen .ikon svg { width:18px; height:18px; }
.yuzen .ikon.yesil { background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); }
.yuzen .ikon.navy { background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); }
.yuzen .ikon.altin { background:color-mix(in srgb,var(--altin) 16%,transparent); color:#7a5a06; }
.yuzen b { display:block; font-size:13px; color:var(--ink); }
.yuzen span { display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.4; margin-top:2px; }
.yuzen.bildirim { left:-28px; bottom:34px; }
.yuzen.pdf { right:-18px; top:-18px; }
.yuzen.ai { right:26px; bottom:-26px; max-width:250px; }
.js .yuzen { animation:yuz 6s ease-in-out infinite; }
.js .yuzen.pdf { animation-delay:-2s; }
.js .yuzen.ai { animation-delay:-4s; }
@keyframes yuz { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* Kayan modul seridi */
.serit { margin-top:44px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.serit-ic { display:flex; gap:0; width:max-content; animation:kay 60s linear infinite; }
.serit:hover .serit-ic { animation-play-state:paused; }
.serit-ic span { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; font-size:13.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.serit-ic span::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--altin); }
@keyframes kay { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   NEDEN — bento
   ============================================================ */
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.bento .kutu { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 26px 24px; position:relative; overflow:hidden; }
.bento .kutu.b6 { grid-column:span 6; } .bento .kutu.b4 { grid-column:span 4; } .bento .kutu.b8 { grid-column:span 8; } .bento .kutu.b3 { grid-column:span 3; }
.bento .kutu h3 { font-size:20px; margin-top:12px; }
.bento .kutu p { color:var(--ink-soft); font-size:14.5px; margin-top:8px; max-width:48ch; }
.bento .kutu .pic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand); }
.bento .kutu .pic svg { width:22px; height:22px; }
.bento .kutu.koyu { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.bento .kutu.koyu p { color:color-mix(in srgb,var(--on-brand) 82%,transparent); }
.bento .kutu.koyu .pic { background:color-mix(in srgb,#fff 14%,transparent); color:var(--on-brand); }
.bento .kutu ul.mini { list-style:none; margin-top:14px; display:grid; gap:7px; }
.bento .kutu ul.mini li { display:flex; gap:9px; font-size:13.5px; align-items:flex-start; }
.bento .kutu ul.mini li svg { width:17px; height:17px; color:var(--ok); flex-shrink:0; margin-top:2px; }
.bento .kutu.koyu ul.mini li svg { color:color-mix(in srgb,var(--on-brand) 85%,transparent); }
.roller { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.roller span { font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--border); }
.bento .kutu.koyu .roller span { background:color-mix(in srgb,#fff 10%,transparent); border-color:color-mix(in srgb,#fff 22%,transparent); }

/* ============================================================
   URUN TURU — sekmeli
   ============================================================ */
.tur { display:grid; grid-template-columns:340px 1fr; gap:26px; align-items:start; }
.tur-sekmeler { display:grid; gap:8px; }
.tur-sekme { text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; cursor:pointer; display:flex; gap:12px; align-items:flex-start; transition:.15s; font:inherit; color:var(--ink); }
.tur-sekme .pic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--brand); flex-shrink:0; }
.tur-sekme .pic svg { width:18px; height:18px; }
.tur-sekme b { display:block; font-size:14.5px; }
.tur-sekme span { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.tur-sekme:hover { border-color:color-mix(in srgb,var(--brand) 40%,var(--border)); }
.tur-sekme[aria-selected="true"] { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent); background:var(--surface); }
.tur-sekme[aria-selected="true"] .pic { background:var(--brand); color:var(--on-brand); }
.tur-panel { display:none; }
.tur-panel.acik { display:block; }
.tur-panel .frame { box-shadow:var(--gölge); }
.tur-alt { display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:start; margin-top:18px; }
.tur-alt h3 { font-size:22px; }
.tur-alt p { color:var(--ink-soft); font-size:14.5px; margin-top:8px; }
.tur-alt ul { list-style:none; display:grid; gap:8px; }
.tur-alt li { display:flex; gap:10px; font-size:14px; }
.tur-alt li svg { width:18px; height:18px; color:var(--ok); flex-shrink:0; margin-top:2px; }
.tur-link { margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--brand); }
.tur-link svg { width:16px; height:16px; }

/* ============================================================
   MODUL KATALOGU
   ============================================================ */
.filtre { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:26px; }
.filtre button { font:inherit; font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); cursor:pointer; transition:.15s; }
.filtre button:hover { border-color:color-mix(in srgb,var(--brand) 40%,var(--border)); color:var(--ink); }
.filtre button[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.mod-izgara { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mod { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:.15s; text-align:left; font:inherit; color:var(--ink); position:relative; }
.mod:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); box-shadow:0 16px 34px -22px rgba(28,41,85,.4); }
.mod:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.mod .ust { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mod .pic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--brand); }
.mod .pic svg { width:20px; height:20px; }
.mod h3 { font-size:16px; }
.mod p { color:var(--ink-soft); font-size:13.5px; flex:1; }
.mod .etiketler { display:flex; flex-wrap:wrap; gap:6px; }
.mod .etiketler span { font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--bg); border:1px solid var(--border); color:var(--ink-soft); }
.mod .detay-ok { font-size:12.5px; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:6px; }
.mod .detay-ok svg { width:14px; height:14px; }
.mod[hidden] { display:none; }
.mod .mod-detay { display:none; }

/* Modul detay penceresi (dialog) */
dialog.pencere { border:0; border-radius:20px; padding:0; max-width:min(880px,calc(100vw - 32px)); width:100%; background:var(--surface); color:var(--ink); box-shadow:0 40px 90px -30px rgba(0,0,0,.5); }
dialog.pencere::backdrop { background:rgba(20,24,40,.55); backdrop-filter:blur(3px); }
.pencere-ic { padding:26px 28px 28px; }
.pencere-bas { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pencere-bas h3 { font-size:23px; }
.pencere-bas .kapat { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--ink); cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
.pencere-bas .kapat svg { width:18px; height:18px; }
.pencere-govde { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px; align-items:start; }
.pencere-govde p.oz { color:var(--ink-soft); font-size:14.5px; }
.pencere-govde ul { list-style:none; display:grid; gap:9px; margin-top:12px; }
.pencere-govde li { display:flex; gap:10px; font-size:14px; }
.pencere-govde li svg { width:18px; height:18px; color:var(--ok); flex-shrink:0; margin-top:2px; }
.pencere-govde .frame { box-shadow:none; }
.pencere-alt { margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pencere-alt .rozet { background:var(--bg); }
.pencere-alt .btn { margin-left:auto; }

/* ============================================================
   DERIN DALIS satirlari (pazarlama.css .feat uzerine)
   ============================================================ */
.dalis .feat .kd { color:var(--brand); }
.dalis .feat .kd svg { width:16px; height:16px; }
.dalis .feat .akis { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.dalis .feat .akis span { font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.dalis .feat .akis span::after { content:'→'; color:var(--ink-soft); font-weight:500; }
.dalis .feat .akis span:last-child::after { content:none; }
section.tint .dalis .feat .akis span { background:var(--bg); }
.dalis .cift { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dalis .cift .frame { box-shadow:var(--gölge); }
.frame .altyazi { font-size:12.5px; color:var(--ink-soft); padding:9px 12px; border-top:1px solid var(--border); background:var(--surface-2); }

/* ============================================================
   RAPORLAR & PDF
   ============================================================ */
.kagitlar { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.kagit { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:.15s; }
.kagit:hover { transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(28,41,85,.4); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); }
.kagit .sayfa { background:#e9e6dd; padding:14px 14px 0; height:200px; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; }
.kagit .sayfa img { width:100%; height:auto; box-shadow:0 10px 24px -14px rgba(0,0,0,.45); border-radius:4px 4px 0 0; }
.kagit .sayfa.yatay { align-items:center; padding:14px; }
.kagit .sayfa.yatay img { border-radius:4px; }
.kagit .alt { padding:14px 16px 16px; }
.kagit h3 { font-size:15px; }
.kagit p { color:var(--ink-soft); font-size:13px; margin-top:4px; }
.kagit .rozet { margin-top:10px; }

/* ============================================================
   VIDEO GALERISI
   ============================================================ */
.videolar { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vid { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; text-align:left; padding:0; font:inherit; color:var(--ink); transition:.15s; display:flex; flex-direction:column; }
.vid:hover { transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(28,41,85,.4); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); }
.vid:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vid .kapak { position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; }
.vid .kapak img { width:100%; height:100%; object-fit:cover; display:block; }
.vid .oynat { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(28,41,85,.92); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); transition:.15s; }
.vid:hover .oynat { transform:translate(-50%,-50%) scale(1.08); }
.vid .oynat svg { width:20px; height:20px; margin-left:3px; fill:currentColor; stroke:none; }
.vid .sure { position:absolute; right:10px; bottom:10px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.6); color:#fff; }
.vid .alt { padding:12px 14px 14px; }
.vid h3 { font-family:var(--font-b); font-size:14px; font-weight:700; }
.vid p { color:var(--ink-soft); font-size:12.5px; margin-top:3px; }
.vid[hidden] { display:none; }
dialog.vid-pencere { border:0; border-radius:18px; padding:0; width:min(1100px,calc(100vw - 32px)); background:#0c1020; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
dialog.vid-pencere::backdrop { background:rgba(8,10,20,.78); }
.vid-pencere-bas { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 18px; color:#fff; }
.vid-pencere-bas b { font-size:14.5px; }
.vid-pencere-bas span { font-size:12.5px; opacity:.7; margin-left:8px; }
.vid-pencere-bas .kapat { width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:grid; place-items:center; }
.vid-pencere-bas .kapat svg { width:18px; height:18px; }
dialog.vid-pencere video { display:block; width:100%; aspect-ratio:16/9; background:#000; }

/* ============================================================
   KIMLER ICIN — 4 sutun
   ============================================================ */
.kimler4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kimler4 .col { border-radius:18px; padding:24px 22px; border:1px solid var(--border); background:var(--surface); }
section.tint .kimler4 .col { background:var(--bg); }
.kimler4 .col.koc { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.kimler4 .badge { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); }
.kimler4 .col.koc .badge { color:color-mix(in srgb,var(--on-brand) 82%,transparent); }
.kimler4 h3 { font-size:19px; margin-top:8px; }
.kimler4 ul { list-style:none; margin-top:14px; display:grid; gap:9px; }
.kimler4 li { display:flex; gap:9px; font-size:13.8px; }
.kimler4 li svg { width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--ok); }
.kimler4 .col.koc li svg { color:color-mix(in srgb,var(--on-brand) 80%,transparent); }

/* ============================================================
   NASIL CALISIR — 5 adim
   ============================================================ */
.adimlar5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:ad; }
.adim { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:22px 20px; }
section.tint .adim { background:var(--bg); }
.adim .no { counter-increment:ad; font-family:var(--font-d); font-weight:700; font-size:15px; width:36px; height:36px; border-radius:10px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; margin-bottom:14px; }
.adim .no::before { content:counter(ad); }
.adim h3 { font-size:16px; }
.adim p { color:var(--ink-soft); font-size:13.5px; margin-top:7px; }
.adim .sure { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--brand); }

/* ============================================================
   KIYAS tablosu
   ============================================================ */
.kiyas { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.kiyas th, .kiyas td { padding:14px 18px; text-align:left; font-size:14px; vertical-align:top; border-bottom:1px solid var(--border); }
.kiyas tr:last-child td { border-bottom:0; }
.kiyas th { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); }
.kiyas th.dm { color:var(--brand); }
.kiyas td:first-child { font-weight:700; width:24%; }
.kiyas td.eski { color:var(--ink-soft); }
.kiyas td.dm { color:var(--ink); background:color-mix(in srgb,var(--brand) 4%,transparent); }
.kiyas td.dm::before { content:'✓ '; color:var(--ok); font-weight:700; }
.kiyas-sar { overflow-x:auto; }

/* ============================================================
   GUVEN
   ============================================================ */
.guven { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.guven .kutu { background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:22px; }
section.tint .guven .kutu { background:var(--bg); }
.guven .pic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--brand); margin-bottom:12px; }
.guven .pic svg { width:20px; height:20px; }
.guven h3 { font-size:16px; }
.guven p { color:var(--ink-soft); font-size:13.8px; margin-top:6px; }

/* ============================================================
   SSS — <details>
   ============================================================ */
.sss { max-width:820px; margin:0 auto; display:grid; gap:10px; }
.sss details { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0 20px; transition:.15s; }
.sss details[open] { border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); }
.sss summary { list-style:none; cursor:pointer; padding:16px 0; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sss summary::-webkit-details-marker { display:none; }
.sss summary::after { content:'+'; font-size:20px; color:var(--brand); font-weight:500; flex-shrink:0; width:26px; height:26px; border-radius:8px; background:color-mix(in srgb,var(--brand) 8%,transparent); display:grid; place-items:center; }
.sss details[open] summary::after { content:'–'; }
.sss .cevap { color:var(--ink-soft); font-size:14.5px; padding:0 0 18px; line-height:1.6; }
.sss .cevap a { color:var(--brand); font-weight:600; text-decoration:underline; }

/* ============================================================
   Bolum ici kucuk yardimcilar
   ============================================================ */
.ortala { text-align:center; }
.uc-sutun { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.not-kutu { background:color-mix(in srgb,var(--brand) 5%,transparent); border:1px dashed color-mix(in srgb,var(--brand) 30%,transparent); border-radius:14px; padding:14px 18px; font-size:13.5px; color:var(--ink-soft); margin-top:22px; }
.not-kutu b { color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
    .mod-izgara, .videolar, .kagitlar { grid-template-columns:repeat(3,1fr); }
    .kimler4 { grid-template-columns:1fr 1fr; }
    .adimlar5 { grid-template-columns:repeat(3,1fr); }
    .bento .kutu.b3 { grid-column:span 6; }
    .bento .kutu.b4 { grid-column:span 6; }
    .bento .kutu.b8 { grid-column:span 12; }
}
@media (max-width:960px){
    .hero.katalog .hero-grid { grid-template-columns:1fr; }
    .sahne .frame { transform:none; }
    .yuzen { display:none; }
    .tur { grid-template-columns:1fr; }
    .tur-sekmeler { grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
    .tur-sekme { scroll-snap-align:start; }
    .tur-alt { grid-template-columns:1fr; }
    .pencere-govde { grid-template-columns:1fr; }
}
@media (max-width:760px){
    .mod-izgara, .videolar, .kagitlar, .uc-sutun, .guven { grid-template-columns:1fr 1fr; }
    .bento .kutu { grid-column:span 12 !important; }
    .dalis .cift { grid-template-columns:1fr; }
    .adimlar5 { grid-template-columns:1fr 1fr; }
    .kiyas th, .kiyas td { padding:12px 12px; font-size:13.5px; }
    .kiyas td:first-child { width:auto; }
}
@media (max-width:560px){
    .mod-izgara, .videolar, .kagitlar, .uc-sutun, .guven, .kimler4, .adimlar5 { grid-template-columns:1fr; }
    /* Kıyas tablosu dar ekranda kart olur: her satır bir kart, hücre etiketi data-b'den */
    .kiyas thead { display:none; }
    .kiyas, .kiyas tbody, .kiyas tr, .kiyas td { display:block; width:100%; }
    .kiyas tr { border-bottom:1px solid var(--border); padding:6px 0; }
    .kiyas tr:last-child { border-bottom:0; }
    .kiyas td { border:0; padding:8px 16px; }
    .kiyas td:first-child { padding-top:12px; font-size:15px; }
    .kiyas td[data-b]::before { content:attr(data-b); display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px; }
    .kiyas td.dm::before { color:var(--brand); }
    .kiyas td.dm { border-radius:10px; margin:0 8px 8px; width:auto; }
    .hero.katalog { padding-top:32px; }
    .serit-ic span { padding:12px 16px; font-size:13px; }
    .pencere-ic { padding:20px 18px 22px; }
}
@media (prefers-reduced-motion:reduce){
    .serit-ic { animation:none; }
    .js .yuzen { animation:none; }
}