/* ==== 15 mimari: header varyantları + liste şekilleri ==== */

/* ---------- 1) RAIL: solda dikey menü ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:230px;background:var(--surf);border-right:1px solid var(--line);padding:1.1rem .9rem;display:flex;flex-direction:column;gap:1.2rem;z-index:40;overflow:auto}
.rail-nav{display:flex;flex-direction:column;gap:.2rem}
.rail-nav a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:var(--r-s);font-size:.9rem;color:var(--fg-2)}
.rail-nav a:hover{background:var(--surf-2);color:var(--acc)}
.rail-nav .dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--acc);opacity:.6}
.rail-foot{margin-top:auto;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.8rem}
.rail-bar{margin-left:230px;background:var(--surf-2);border-bottom:1px solid var(--line)}
.rail-bar-in{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;font-size:.82rem;color:var(--muted)}
.live{display:inline-flex;align-items:center;gap:.4rem}
html[data-nav=rail] .main,html[data-nav=rail] .ft{margin-left:230px}
html[data-nav=rail] .wrap{width:min(1100px,100% - 2rem)}

/* ---------- 2) SERIT: üst nav + kategori şeridi ---------- */
.hd-serit{background:var(--surf);border-bottom:1px solid var(--line)}
.hd-serit-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.hd-serit-strip{background:var(--acc);color:var(--acc-fg)}
.strip-in{display:flex;gap:1.2rem;overflow:auto;padding:.5rem 0;font-size:.84rem;font-weight:600}
.strip-in a{color:var(--acc-fg);white-space:nowrap;opacity:.92}
.strip-in a:hover{opacity:1;text-decoration:underline}

/* ---------- 3) MASTHEAD: gazete ---------- */
.hd-mast{border-bottom:3px double var(--line);background:var(--surf)}
.mast-util{background:var(--surf-2);font-size:.76rem;color:var(--muted);padding:.4rem 0;border-bottom:1px solid var(--line)}
.mast-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;padding:1.4rem 0}
.mast-side{font-size:.76rem;color:var(--muted);line-height:1.35}
.mast-side b{font-size:1.4rem;color:var(--fg);font-family:var(--font-h)}
.mast-side-r{text-align:right}
.mast-logo{text-align:center}
.mast-logo a{font-family:var(--font-h);font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);font-weight:700;letter-spacing:-.5px;color:var(--fg)}
.mast-logo span{display:block;font-size:.8rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:.2rem}
.mast-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mast-nav .wrap{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;padding:.6rem 0}
.mast-nav a{font-size:.86rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-2)}
.mast-nav a:hover{color:var(--acc)}

/* ---------- 4) PILL ---------- */
.hd-pill{padding:1rem 0;background:var(--surf)}
.hd-pill-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pill-nav{display:flex;gap:.4rem;flex-wrap:wrap}
.pill-nav a{padding:.45rem .95rem;border-radius:999px;background:var(--surf-2);border:1px solid var(--line);font-size:.85rem;color:var(--fg-2)}
.pill-nav a:hover{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}

/* ---------- 5) MEGA ---------- */
.hd-mega{background:var(--surf);border-bottom:1px solid var(--line)}
.mega-util{background:var(--surf-2);font-size:.76rem;color:var(--muted);padding:.35rem 0}
.mega-util .wrap{display:flex;justify-content:space-between;gap:1rem}
.hd-mega-in{display:flex;align-items:center;gap:1.2rem;padding:.8rem 0;flex-wrap:wrap}
.mega-wrap{position:relative}
.mega-btn{padding:.5rem .9rem;border-radius:var(--r-s);background:var(--acc);color:var(--acc-fg);border:0;font-weight:700;font-size:.85rem;cursor:pointer;font-family:var(--font-b)}
.mega-panel{position:absolute;top:calc(100% + .5rem);left:0;display:none;grid-template-columns:repeat(2,minmax(200px,1fr));gap:.6rem;padding:1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:50;min-width:460px}
.mega-wrap:hover .mega-panel,.mega-wrap:focus-within .mega-panel{display:grid}
.mega-panel a{display:flex;flex-direction:column}
.mega-panel b{font-size:.9rem}
.mega-panel i{font-style:normal;font-size:.76rem;color:var(--muted)}

/* ---------- 6) MINIMAL (dergi) ---------- */
.hd-min{padding:1.6rem 0 0;background:var(--bg)}
.hd-min-in{display:flex;justify-content:center}
.hd-min-rule{height:3px;background:linear-gradient(90deg,transparent,var(--acc),transparent);margin:1.2rem 0 .6rem}
html[data-nav=minimal] .nav-spread a{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}

/* ---------- 7) UTIL (veri) ---------- */
.hd-util{background:var(--surf);border-bottom:1px solid var(--line)}
.util-top{background:var(--fg);color:var(--bg);font-size:.78rem;padding:.4rem 0}
.util-top .wrap{display:flex;gap:1rem;align-items:center}
.util-top b{font-family:var(--font-h)}
.util-top span{opacity:.8}
.util-r{margin-left:auto}
.hd-util-in{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:.9rem;flex-wrap:wrap}
.util-badge{font-size:.74rem;color:var(--muted);padding-bottom:.5rem}

/* ---------- 8) STICKY (neon) ---------- */
.hd-sticky{position:sticky;top:0;z-index:45;background:color-mix(in srgb,var(--surf) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-sticky-in{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.hd-sticky-in .nav{margin-left:auto}

/* ---------- 9) MOBIL: altta sabit nav ---------- */
.hd-mb{background:var(--surf);border-bottom:1px solid var(--line)}
.hd-mb-in{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.mb-date{font-size:.76rem;color:var(--muted)}
.mb-nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surf);border-top:1px solid var(--line);z-index:60;padding:.35rem .2rem env(safe-area-inset-bottom)}
.mb-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.66rem;color:var(--muted);padding:.3rem 0}
.mb-nav a span{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--surf-2);color:var(--acc);font-weight:700;font-size:.75rem}
html[data-nav=mobil] body{padding-bottom:4.2rem}

/* ---------- 10) CENTER (kupon) ---------- */
.hd-center{background:var(--surf);border-bottom:1px solid var(--line);text-align:center}
.hd-center-in{padding:1.6rem 0 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hd-center-sub{margin:0;font-size:.86rem;color:var(--muted)}

/* ---------- 11) BANT (vitrin) ---------- */
.bant{background:var(--acc);color:var(--acc-fg);text-align:center;font-size:.8rem;font-weight:700;padding:.45rem 1rem;letter-spacing:.02em}
.hd-bant{background:var(--surf);border-bottom:1px solid var(--line)}
.hd-bant-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}

/* ---------- 12) INCE (sıralı) ---------- */
.hd-ince{border-bottom:1px solid var(--line);background:var(--bg)}
.hd-ince-in{display:flex;align-items:center;gap:1.2rem;padding:.6rem 0}
.hd-ince-in .nav{margin-left:auto}
.ince-meta{font-size:.74rem;color:var(--muted)}

/* ---------- 13) HERO ---------- */
.hd-hero{background:radial-gradient(120% 140% at 50% 0,var(--surf-2),var(--bg) 65%);border-bottom:1px solid var(--line)}
.hd-hero-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;flex-wrap:wrap}
.hd-hero-body{text-align:center;padding:2.6rem 0 2.8rem}
.hero-h1{margin:0 0 .6rem;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
.hero-p{margin:0 auto 1.6rem;max-width:64ch;color:var(--muted)}
.hero-stats{display:flex;justify-content:center;gap:2.4rem;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--font-h);font-size:1.5rem;color:var(--acc)}
.hero-stats span{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- 14) SAGLAYICI (galeri) ---------- */
.hd-sag{background:var(--surf);border-bottom:1px solid var(--line)}
.hd-sag-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.sag-strip{background:var(--surf-2);border-top:1px solid var(--line)}
.sag-strip-in{display:flex;gap:1.4rem;overflow:auto;padding:.45rem 0;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sag-strip-in span{white-space:nowrap}

/* ---------- 15) ICONRAIL (stüdyo) ---------- */
.icrail{position:fixed;left:0;top:0;bottom:0;width:70px;background:var(--surf-2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.9rem .3rem;z-index:50;overflow:auto}
.icrail a{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;padding:.45rem .2rem;border-radius:var(--r-s);color:var(--muted);font-size:.58rem;text-align:center}
.icrail a:hover{background:var(--surf);color:var(--acc)}
.icrail a span{font-size:1rem}
.icrail a i{font-style:normal;overflow:hidden;text-overflow:ellipsis;width:100%;white-space:nowrap}
.hd-ic{margin-left:70px;background:var(--surf);border-bottom:1px solid var(--line)}
.hd-ic-in{display:flex;align-items:center;gap:1rem;padding:.7rem 1.2rem}
.ic-search{margin-left:auto;display:flex;gap:.3rem}
.ic-search input{padding:.45rem .7rem;border-radius:var(--r-s);border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:.84rem;min-width:220px}
.ic-search button{padding:.45rem .8rem;border-radius:var(--r-s);border:0;background:var(--acc);color:var(--acc-fg);font-weight:700;cursor:pointer}
.ic-live{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--muted)}
html[data-nav=iconrail] .main,html[data-nav=iconrail] .ft{margin-left:70px}

/* ==================== LİSTE ŞEKİLLERİ ==================== */

/* 1) tablo */
.tb-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tb{font-size:.9rem;min-width:760px}
.tb thead th{background:var(--surf-2);text-align:left;padding:.65rem .7rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line)}
.tb td{padding:.7rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tb tbody tr:hover{background:var(--surf)}
.tb-no{color:var(--muted);font-family:var(--font-h);width:2.4rem}
.tb-brand a{font-weight:700}
.tb-brand i{display:block;font-style:normal;font-size:.72rem;color:var(--muted)}
.tb-bonus b{display:block;color:var(--acc)}
.tb-bonus span{font-size:.76rem;color:var(--muted)}
.tb-rate{font-weight:800;color:var(--ok)}

/* 2) kart grid */
.kt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.kt{display:flex;flex-direction:column;gap:.7rem;padding:1.1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.kt:hover{border-color:var(--acc)}
.kt header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.kt header h3{margin:0;font-size:1.1rem}
.kt-rate{font-weight:800;color:var(--acc);font-family:var(--font-h)}
.kt-bonus{padding:.7rem .8rem;background:var(--surf-2);border-radius:var(--r-s);border-left:3px solid var(--acc)}
.kt-bonus b{display:block;font-size:1.25rem;font-family:var(--font-h)}
.kt-bonus span{font-size:.8rem;color:var(--muted)}
.kt-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;font-size:.83rem;color:var(--fg-2)}
.kt-feat li::before{content:"✓";color:var(--ok);margin-right:.4rem;font-weight:700}
.kt footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--line)}
.kt footer small{color:var(--muted)}

/* 3) manşet (gazete) */
.gz-list{border-top:2px solid var(--line)}
.gz-row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.gz-row h3{margin:0 0 .3rem;font-size:1.15rem;font-weight:700}
.gz-row p{margin:0;font-size:.85rem;color:var(--muted)}
.gz-lead{padding:1.6rem 0}
.gz-lead h3{font-size:clamp(1.3rem,1rem + 1.4vw,2rem)}
.gz-meta{text-align:center;min-width:78px;padding-left:1.2rem;border-left:1px solid var(--line)}
.gz-meta b{display:block;font-family:var(--font-h);font-size:1.6rem;color:var(--acc)}
.gz-meta span{font-size:.68rem;color:var(--muted);text-transform:uppercase}

/* 4) pano */
.pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}
.pn{display:flex;flex-direction:column;gap:.35rem;padding:1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.pn:hover{border-color:var(--acc);background:var(--surf-2)}
.pn-top{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pn-big{font-family:var(--font-h);font-size:1.6rem;color:var(--acc);font-weight:800}
.pn-sub{font-size:.8rem;color:var(--fg-2);min-height:2.4em}
.pn-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:.5rem;margin-top:.3rem;font-size:.76rem}
.pn-foot i{font-style:normal;color:var(--muted)}
.pn-foot b{color:var(--ok)}

/* 5) bülten */
.bl{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bl-row{display:grid;grid-template-columns:1.4fr 1.6fr .9fr .9fr auto auto;gap:.9rem;align-items:center;padding:.75rem .9rem;border-bottom:1px solid var(--line);font-size:.87rem;background:var(--surf)}
.bl-row:nth-child(even){background:var(--bg)}
.bl-row:last-child{border-bottom:0}
.bl-brand a{font-weight:700}
.bl-brand i{display:block;font-style:normal;font-size:.7rem;color:var(--muted)}
.bl-bonus{color:var(--fg-2)}
.bl-cell{color:var(--muted);font-size:.8rem}
.bl-rate{font-weight:800;color:var(--acc)}

/* 6) dergi */
.dg-lead{display:flex;gap:1.5rem;align-items:center;padding:1.6rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);margin-bottom:1.2rem}
.dg-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--acc)}
.dg-lead h3{margin:.4rem 0;font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem)}
.dg-bonus{margin:0 0 .8rem;color:var(--fg-2)}
.dg-feat{list-style:none;margin:0 0 1rem;padding:0;display:flex;gap:.8rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.dg-feat li{padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px}
.dg-lead-rate{text-align:center;padding-left:1.4rem;border-left:1px solid var(--line)}
.dg-lead-rate b{display:block;font-family:var(--font-h);font-size:2.4rem;color:var(--acc)}
.dg-lead-rate span{color:var(--warn);font-size:.9rem}
.dg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.dg{padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.dg h4{margin:0 0 .4rem;font-size:1.02rem}
.dg p{margin:0 0 .7rem;font-size:.84rem;color:var(--muted)}
.dg footer{display:flex;justify-content:space-between;font-size:.82rem}
.dg footer b{color:var(--acc)}

/* 7) veri tablosu */
.vd-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.vd{font-size:.88rem;min-width:720px}
.vd thead th{background:var(--fg);color:var(--bg);padding:.6rem .7rem;text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.vd td{padding:.65rem .7rem;border-bottom:1px solid var(--line)}
.vd tbody tr:hover{background:var(--surf-2)}
.vd-brand a{font-weight:700}
.vd-time b{color:var(--ok);font-family:var(--font-h);font-size:1.05rem}
.vd-pay{color:var(--muted);font-size:.8rem}
.vd-rate span{display:inline-block;padding:.15rem .5rem;border-radius:var(--r-s);background:var(--acc);color:var(--acc-fg);font-weight:700;font-size:.8rem}

/* 8) şeritli (neon) */
.sr-list{display:flex;flex-direction:column;gap:.6rem}
.sr{display:grid;grid-template-columns:auto 1.6fr 1.4fr auto;gap:1rem;align-items:center;padding:.8rem 1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.sr:hover{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.sr-ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--r-s);background:var(--surf-2);color:var(--acc);font-family:var(--font-h);font-weight:800;font-size:1.1rem}
.sr-body b{display:block}
.sr-body i{font-style:normal;font-size:.8rem;color:var(--muted)}
.sr-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.sr-tags em{font-style:normal;font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:var(--surf-2);color:var(--muted)}
.sr-rate{font-family:var(--font-h);font-weight:800;font-size:1.2rem;color:var(--acc)}

/* 9) mobil kart */
.mb-list{display:flex;flex-direction:column;gap:.7rem}
.mb-card{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.mb-head{display:flex;justify-content:space-between;align-items:center}
.mb-head b{font-size:1.02rem}
.mb-head i{font-style:normal;font-weight:800;color:var(--acc)}
.mb-bonus{font-family:var(--font-h);font-size:1.5rem;color:var(--acc)}
.mb-sub{font-size:.84rem;color:var(--fg-2)}
.mb-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.mb-row em{font-style:normal;font-size:.7rem;padding:.2rem .5rem;border-radius:var(--r-s);background:var(--surf-2);color:var(--muted)}

/* 10) kupon */
.kp-grid{display:flex;flex-direction:column;gap:.8rem}
.kp{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;background:var(--surf);border:1px dashed var(--acc);border-radius:var(--r);position:relative}
.kp::before,.kp::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--bg);top:50%;transform:translateY(-50%)}
.kp::before{left:-8px}
.kp::after{right:-8px}
.kp-l b{display:block;font-size:1.05rem}
.kp-l span{font-size:.85rem;color:var(--fg-2)}
.kp-l i{display:block;font-style:normal;font-size:.74rem;color:var(--muted)}
.kp-r{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.kp-code{font-family:var(--font-h);font-weight:800;letter-spacing:.12em;padding:.35rem .8rem;border:2px dashed var(--acc);border-radius:var(--r-s);color:var(--acc)}

/* 11) vitrin */
.vt-banner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.6rem;border-radius:var(--r);background:linear-gradient(120deg,var(--surf-2),var(--surf));border:1px solid var(--line);margin-bottom:1.2rem}
.vt-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--acc)}
.vt-banner h3{margin:.4rem 0 .5rem;font-size:clamp(1.25rem,1rem + 1.2vw,1.85rem)}
.vt-banner p{margin:0 0 1rem;color:var(--muted);font-size:.88rem}
.vt-banner-rate{font-family:var(--font-h);font-size:2.6rem;font-weight:800;color:var(--acc)}
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.vt{padding:1.1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.vt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.vt-top b{font-size:1.05rem}
.vt-top span{font-weight:800;color:var(--acc)}
.vt p{margin:0 0 .6rem;font-size:.86rem;color:var(--fg-2)}
.vt ul{margin:0 0 .8rem;padding-left:1.1rem;font-size:.8rem;color:var(--muted)}

/* 12) sıralı liste */
.sl{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:.7rem}
.sl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.9rem 1rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.sl-no{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--acc);color:var(--acc-fg);font-family:var(--font-h);font-weight:800}
.sl-body h3{margin:0 0 .2rem;font-size:1.05rem}
.sl-body p{margin:0 0 .45rem;font-size:.84rem;color:var(--muted)}
.sl-bars{display:flex;align-items:center;gap:.6rem}
.sl-bar{display:block;flex:1;height:6px;border-radius:999px;background:var(--surf-2);overflow:hidden;max-width:260px}
.sl-bar i{display:block;height:100%;background:var(--acc)}
.sl-bars em{font-style:normal;font-size:.76rem;color:var(--muted)}

/* 13) karma */
.km-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1.2rem}
.km{padding:1.2rem;background:var(--surf);border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:var(--r)}
.km-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--acc)}
.km h3{margin:.4rem 0}
.km-bonus{margin:0;font-family:var(--font-h);font-size:1.7rem;color:var(--fg)}
.km p{margin:.2rem 0 .8rem;font-size:.86rem;color:var(--muted)}
.km footer{display:flex;justify-content:space-between;font-size:.82rem;border-top:1px dashed var(--line);padding-top:.6rem}
.km footer b{color:var(--acc)}

/* 14) galeri */
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.gl{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;padding:.9rem;border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,var(--surf-2),var(--surf));border:1px solid var(--line)}
.gl-big{grid-column:span 2;min-height:220px}
.gl-shade{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0,color-mix(in srgb,var(--acc) 28%,transparent),transparent 70%)}
.gl-txt{position:relative;display:flex;flex-direction:column;gap:.2rem}
.gl-txt b{font-size:1.05rem}
.gl-txt i{font-style:normal;font-size:.8rem;color:var(--muted)}
.gl-txt em{font-style:normal;font-family:var(--font-h);font-size:1.2rem;color:var(--acc)}
.gl-rate{position:absolute;top:.6rem;right:.6rem;padding:.2rem .55rem;border-radius:999px;background:var(--acc);color:var(--acc-fg);font-size:.76rem;font-weight:800}
.gl:hover{border-color:var(--acc)}

/* 15) split */
.sp-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem}
.sp-lead{padding:1.4rem;background:linear-gradient(150deg,var(--surf-2),var(--surf));border:1px solid var(--line);border-radius:var(--r)}
.sp-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sp-lead h3{margin:.5rem 0}
.sp-bonus{margin:0;color:var(--fg-2)}
.sp-amount{margin:.2rem 0 .8rem;font-family:var(--font-h);font-size:2rem;color:var(--acc)}
.sp-lead ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.3rem;font-size:.84rem;color:var(--muted)}
.sp-lead ul li::before{content:"▸";color:var(--acc);margin-right:.4rem}
.sp-side{display:flex;flex-direction:column;gap:.5rem}
.sp-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.75rem .9rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-s)}
.sp-item b{grid-row:1}
.sp-item span{grid-row:2;grid-column:1;font-size:.78rem;color:var(--muted)}
.sp-item i{grid-row:1 / span 2;font-style:normal;font-weight:800;color:var(--acc)}
.sp-item:hover{border-color:var(--acc)}

@media (max-width:900px){
  .rail,.icrail{position:static;width:auto;flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}
  .rail-nav{flex-direction:row}
  .rail-foot{display:none}
  html[data-nav=rail] .main,html[data-nav=rail] .ft,.rail-bar,html[data-nav=iconrail] .main,html[data-nav=iconrail] .ft,.hd-ic{margin-left:0}
  .mast-mid{grid-template-columns:1fr;text-align:center}
  .mast-side{display:none}
  .bl-row{grid-template-columns:1fr auto;row-gap:.3rem}
  .bl-cell,.bl-bonus{font-size:.78rem}
  .sp-wrap{grid-template-columns:1fr}
  .dg-lead{flex-direction:column;align-items:flex-start}
  .dg-lead-rate{border-left:0;padding-left:0}
  .gl-big{grid-column:span 1}
  .ic-search input{min-width:120px}
}