/* ==========================================================
   3 Bant Akademi — ön yüz
   ========================================================== */
:root{
  --bg:#08110e;
  --bg2:#0c1814;
  --surface:#101c17;
  --surface2:#15251f;
  --line:#1f3329;
  --ink:#e9f2ed;
  --ink2:#a9bdb3;
  --muted:#7c9388;
  --accent:#19c37d;
  --accent-ink:#03140c;
  --gold:#e8b94a;
  --shadow:0 18px 50px -20px rgba(0,0,0,.65);
  --r: 18px;
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
[data-theme="light"]{
  --bg:#f5f4ee; --bg2:#edece4; --surface:#ffffff; --surface2:#f7f6f0; --line:#e1e0d6;
  --ink:#10201a; --ink2:#43584d; --muted:#728378;
  --accent:#0c9d62; --accent-ink:#fff; --gold:#b98a14;
  --shadow:0 18px 40px -22px rgba(30,50,40,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-weight:400;   /* <-- EKLE */margin:0;background:var(--bg);color:var(--ink);font: 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;margin:0;letter-spacing:-.01em}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.container{width:min(1180px,100% - 40px);margin-inline:auto}
.container.narrow{}
.section{padding-block: 26px;}
.muted{color:var(--muted)}

/* Top progress */
.progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:100;transition:width .1s}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-family:var(--serif);font-size: 22px;}
.brand-text small{font-size:11.5px;color:var(--muted);margin-top:3px}
.logo{position:relative;width:38px;height:38px;flex:none}
.b{position:absolute;border-radius:50%;display:block}
.logo .b{width:20px;height:20px;box-shadow:inset -3px -4px 6px rgba(0,0,0,.25),0 3px 8px rgba(0,0,0,.35)}
.logo .b1{left:0;top:3px;background:radial-gradient(circle at 30% 28%,#fff,#d9dfdc 60%,#aab4af)}
.logo .b2{right:0;top:0;background:radial-gradient(circle at 30% 28%,#fff6b0,#f2cf2e 55%,#b9980c)}
.logo .b3{left:9px;bottom:0;background:radial-gradient(circle at 30% 28%,#ff9c8f,#e0301f 55%,#8e1409)}
.menu{display:flex;align-items:center;gap:4px;margin-left:12px}
.menu>a,.dd-btn{padding:9px 14px;border-radius:999px;color:var(--ink2);font-weight:500;font-size:14.5px;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit}
.menu>a:hover,.dd-btn:hover,.menu>a.on{color:var(--ink);background:var(--surface)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14.5px}
.dd-menu a:hover{background:var(--surface2)}
.dd-menu i{width:10px;height:10px;border-radius:50%}
.dd-menu em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.search-mini{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 14px;height:40px;color:var(--muted)}
.search-mini input{background:none;border:0;outline:0;color:var(--ink);width:130px;font:inherit;font-size:14px;transition:width .2s}
.search-mini input:focus{width:200px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink2);cursor:pointer;font-size:18px;transition:.15s}
.icon-btn:hover{color:var(--ink);border-color:var(--accent)}
.i-sun{display:none}[data-theme="light"] .i-sun{display:block}[data-theme="light"] .i-moon{display:none}
.burger{display:none}

/* Buttons / chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;border:1px solid transparent;font:600 14.5px var(--font);cursor:pointer;transition:.15s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink2);padding:9px 16px;font-size:13.5px}
.btn-ghost:hover{color:var(--ink);border-color:var(--accent)}
.chip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.chip.lg{font-size:13px;padding:5px 14px}
.eyebrow{display: none;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:6px 14px;border-radius:999px;margin-bottom:18px}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding: 36px 0 26px;
  background: radial-gradient(900px 420px at 80% -10%, color-mix(in srgb, #7391ff 22%, transparent), transparent 70%), radial-gradient(700px 360px at 0% 10%, color-mix(in srgb, #23d62c 12%, transparent), transparent 70%);
  height: 310px !important;
  }
.hero-inner{position:relative;z-index:2;}
.hero h1{font-size: clamp(26px,6.4vw,26px);font-weight:700;margin-bottom: 20px;}
.lead{font-size:clamp(16px,2vw,19px);color:var(--ink2);display: none;max-width:640px;margin: 0 0 26px;}
.hero-search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;max-width:620px;box-shadow:var(--shadow);color:var(--muted)}
.hero-search:focus-within{border-color:var(--accent)}
.hero-search input{flex:1;background:none;border:0;outline:0;color:var(--ink);font:inherit;min-width:0}
.hero-search .btn{padding:11px 24px}
.stats{display:flex;gap:34px;margin-top:34px;display: none;flex-wrap:wrap}
.stats b{display:block;font:700 30px var(--serif)}
.stats span{font-size:13px;color:var(--muted)}
.hero-bg{position:absolute;inset:0;pointer-events:none;color:var(--ink)}
.hero-bg .trail{position:absolute;right:-40px;top:30px;width:620px;max-width:60vw}
.ball{position:absolute;border-radius:50%;box-shadow:inset -10px -14px 24px rgba(0,0,0,.28),0 24px 40px -10px rgba(0,0,0,.55);animation:float 7s ease-in-out infinite}
.bw{width: 66px;height: 66px;right: 12%;top: 30px;background:radial-gradient(circle at 30% 26%,#fff,#dde3e0 55%,#a9b4ae)}
.by{width:74px;height:74px;right: 5%;top: 100px;background:radial-gradient(circle at 30% 26%,#fff7b8,#f3d02f 55%,#b79a0b);animation-delay:-2s}
.br{width:84px;height:84px;right: 14%;top: 140px;background:radial-gradient(circle at 30% 26%,#ffa79b,#e1311f 55%,#8d1409);animation-delay:-4s}
@keyframes float{50%{transform:translateY(-14px)}}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.sec-head h2{font-size: 22px;}
.link{color:var(--accent);font-weight:600;font-size:14.5px}
.link:hover{text-decoration:underline}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap: 10px;}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:var(--shadow)}
.card-cover{display: none;aspect-ratio:16/9;overflow:hidden;background:var(--surface2)}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-cover img{transform:scale(1.05)}
.card-body{padding:20px 22px 20px;display:flex;flex-direction:column;gap: 0px;flex:1}
.card-meta{display: none;align-items: center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.card h3{font-size: 18px;}
.card h3 a:hover{color:var(--accent)}
.card p{margin:0;color:var(--ink2);font-size:14.5px;display: none;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600}
.card-foot .muted{display:inline-flex;gap:6px;align-items:center}
.card-big{flex-direction:row}
.card-big .card-cover{flex:1;aspect-ratio:auto;min-height:220px;max-height:280px}
.card-big .card-body{flex:1;justify-content:center;padding:28px 30px}
.card-big h3{font-size:clamp(22px,2.4vw,30px)}
.card-big p{-webkit-line-clamp:5;font-size:16px}

.cover-fb{position:relative;width:100%;height:100%;overflow:hidden;background:
  radial-gradient(600px 300px at 70% 0%,hsl(var(--h) 60% 30% / .9),transparent 70%),
  linear-gradient(135deg,hsl(var(--h) 45% 14%),hsl(calc(var(--h) + 40) 50% 22%))}
.cover-fb::before{content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.08);border-radius:12px}
.cover-fb .b{width:15%;aspect-ratio:1;box-shadow:inset -4px -6px 10px rgba(0,0,0,.28),0 10px 18px rgba(0,0,0,.4)}
.cover-fb .b1{left:22%;top:38%;background:radial-gradient(circle at 30% 26%,#fff,#dde3e0 55%,#a9b4ae)}
.cover-fb .b2{left:52%;top:22%;background:radial-gradient(circle at 30% 26%,#fff7b8,#f3d02f 55%,#b79a0b)}
.cover-fb .b3{left:64%;top:52%;background:radial-gradient(circle at 30% 26%,#ffa79b,#e1311f 55%,#8d1409)}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cat-card{position:relative;padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:.25s}
.cat-card::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:var(--c);opacity:.12;transition:.3s}
.cat-card:hover{border-color:var(--c);transform:translateY(-3px)}
.cat-card:hover::after{transform:scale(1.5);opacity:.2}
.cat-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--c);margin-bottom:16px;box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 20%,transparent)}
.cat-card h3{font-size:20px;margin-bottom:6px}
.cat-card p{margin:0 0 14px;color:var(--ink2);font-size:14px;min-height:42px}
.cat-count{font-size:12.5px;font-weight:600;color:var(--c)}

.popular{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.popular li{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:18px;border-radius:var(--r)}
.popular li:hover{border-color:var(--accent)}
.rank{font:700 34px var(--serif);color:var(--gold);width:38px;text-align:center}
.popular strong{display:block;font-size:15.5px;line-height:1.35}
.popular small{color:var(--muted)}

/* Archive head */
.page-head{padding: 26px 0 6px;background:radial-gradient(800px 300px at 90% -20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.page-head h1{font-size: clamp(26px,6.4vw,26px);margin-bottom:12px}
.hero-search.slim{max-width:520px}
.chips-row{display: none;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--ink2);font-weight:500}
.chip-btn i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent))}
.chip-btn em{font-style:normal;font-size:12px;color:var(--muted)}
.chip-btn:hover,.chip-btn.on{border-color:var(--c,var(--accent));color:var(--ink);background:color-mix(in srgb,var(--c,var(--accent)) 12%,var(--surface))}
.pager{display:flex;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pg{min-width:42px;height:42px;padding:0 14px;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600}
a.pg:hover{border-color:var(--accent);color:var(--accent)}
.pg.cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pg.dis{opacity:.45}
.empty-box,.empty-state{text-align:center;padding:60px 20px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);color:var(--ink2)}
.empty-state{border:0;background:none;padding:110px 20px}
.big-404{font:700 110px var(--serif);color:var(--accent);line-height:1}
.empty-box h3{margin-bottom:6px;color:var(--ink)}

/* ==========================================================
   Ana sayfa düzeni (sol içerik + sağ 300px sidebar)
   ========================================================== */
.home-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:34px;
  align-items:start;
}
.home-main{min-width:0}
.home-side{width:300px;position:sticky;top:90px;display:flex;flex-direction:column;gap:22px}

/* Reklam kutusu */
.ad-box{width:300px}
.ad-slot{
  position:relative;
  display: grid;
  text-align: center;
  justify-content:center;
  align-items: center;
  background:var(--surface);
  border:1px dashed var(--line);
  border-radius:14px;
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
}
.ad-slot .ad-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.6;
}

/* Sidebar widget'ları */
.side-widget{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
}
.side-title{
  font:600 13px var(--font);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:0 0 12px;
}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.side-list li a{
  display:flex;
  align-items:center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 15px;
  line-height:1.35;
  transition:background .15s;
}
.side-list li a:hover{background:var(--surface2)}
.side-list-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.side-list small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.side-list em{font-style:normal;font-size:12px;color:var(--muted);flex:none}
.side-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent));flex:none}

/* Single */
.preview-bar{background:var(--gold);color:#201700;text-align:center;font-size:14px;padding:8px;font-weight:600}
.preview-bar a{text-decoration:underline;margin-left:8px}
.post-hero{padding:46px 0 10px;background:radial-gradient(800px 320px at 50% -30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;margin-bottom:16px}
.crumbs a:hover{color:var(--accent)}
.crumbs span:last-child{display:none}
.post-hero h1{font-size: clamp(26px,6.4vw,26px);margin: 20px 0 0px;}
.post-hero .lead{margin-bottom:22px}
.byline{display: none;align-items:center;gap:14px}
.byline small{display:block;color:var(--muted);font-size:13px}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--gold));color:#04140d;font-weight:700}

/* Kapak görseli — küçültülmüş */
.post-cover-small{
  margin:0 0 28px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
}
.post-cover-small img{
  width:100%;
  max-height:320px;
  object-fit:cover;
  display:block;
}

/* Detay sayfası düzeni — sağ 300px sidebar */
.post-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap: 30px;
  padding-top: 0;
  padding-bottom: 30px;
  align-items:start;
}
.post-main{min-width:0}
.post-side{
  position:sticky;
  top:90px;
  width:300px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.toc{
  position:static;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:14px;
}
.toc h4{font:600 12px var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.toc a{display:block;padding:6px 10px;margin-left:-10px;border-left:2px solid var(--line);color:var(--ink2);line-height:1.4}
.toc a.l3{padding-left:22px;font-size:13px}
.toc a:hover{color:var(--ink)}
.toc a.on{border-color:var(--accent);color:var(--accent);font-weight:600}

.prose{font-size:18px;line-height:1.85;color:var(--ink2)}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:32px;color:var(--ink);margin:2.1em 0 .6em}
.prose h3{font-size:24px;color:var(--ink);display: none;margin: .8em 0 .5em;}
.prose h4{font:600 19px var(--font);color:var(--ink);margin:1.5em 0 .4em}
.prose p{margin: 0 0 .2em;}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.3em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.8em 0;padding:18px 24px;border-left:4px solid var(--gold);background:var(--surface);border-radius:0 14px 14px 0;color:var(--ink);font-family:var(--serif);font-size:20px}
.prose img{border-radius:16px;margin:1.6em auto;border:1px solid var(--line)}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.prose code{background:var(--surface);border:1px solid var(--line);padding:2px 7px;border-radius:7px;font-size:.88em}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--line);text-align:left}
.prose th{background:var(--surface);color:var(--ink)}

/* Atış oynatıcı */
.shot-embed{margin: .150em 0px;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.shot-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface2),var(--surface))}
.shot-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;flex:none}
.shot-title{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.shot-title strong{color:var(--ink);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-title small{color:var(--muted);font-size:12.5px;font-style: italic;}
.shot-tools{margin-left:auto;display:flex;gap:8px}
.shot-tools .icon-btn{width:36px;height:36px;font-size:16px}
.shot-frame{position:relative;background:#050d0a;width:100%}
.shot-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shot-frame:fullscreen{aspect-ratio:auto!important;height:100vh}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 22px}
.tags a{padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.tags a:hover{border-color:var(--accent);color:var(--accent)}
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:20px 0;border-block:1px solid var(--line)}
.share span{color:var(--muted);font-size:14px;margin-right:6px}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.prevnext a{padding:18px 20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:block;transition:.2s}
.prevnext a:hover{border-color:var(--accent)}
.prevnext a.r{text-align:right}
.prevnext small{display:block;color:var(--muted);margin-bottom:4px}
.prevnext strong{font-family:var(--serif);font-size:17px;line-height:1.3}

/* Footer */
.site-footer{margin-top:70px;border-top:1px solid var(--line);background:var(--bg2);padding-top:48px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot-grid h4{font:600 12px var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px}
.foot-grid a:not(.brand){display:block;color:var(--ink2);padding:4px 0;font-size:14.5px}
.foot-grid a:not(.brand):hover{color:var(--accent)}
.foot-text{color:var(--ink2);max-width:360px;font-size:14.5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:28px;margin-top:30px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.to-top{background:none;border:1px solid var(--line);color:var(--ink2);padding:7px 16px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px}
.to-top:hover{border-color:var(--accent);color:var(--accent)}

/* Responsive */
@media (max-width:1000px){
  /* Ana sayfa: sidebar alta geçer */
  .home-layout{grid-template-columns:1fr}
  .home-side{width:auto;position:static;order:2}
  .home-side .ad-box{width:100%}
  .home-side .ad-slot{width:100%!important;max-width:300px;margin-inline:auto}

  /* Detay sayfası: sidebar üste geçer */
  .post-layout{grid-template-columns:1fr;max-width:820px}
  .post-side{order:-1;width:auto;position:static}
  .post-side .ad-box{width:100%}
  .post-side .ad-slot{width:100%!important;max-width:300px;margin-inline:auto}
  .post-side .toc{position:static}

  .card-big{flex-direction:column}
  .card-big .card-cover{min-height:0;aspect-ratio:16/9;max-height:none}
  .hero-bg .trail{display:none}.ball{opacity:.5}
}
@media (max-width:820px){
  .burger{display:inline-grid}
  .menu{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--bg);padding:12px 20px 20px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.25s;margin:0;z-index:-1}
  .menu.open{transform:none}
  .dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;margin-top:4px}
  .dd-btn svg{display:none}
  .search-mini{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}
  .prevnext{grid-template-columns:1fr}
  .shot-embed{margin-inline:-8px;border-radius:16px}
  .prose{font-size:17px}
  .shot-title small{display:none}
  .post-cover-small img{max-height:220px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* ===== Atış Altı Not (İpucu Kutusu) ===== */
.shot-note {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
  border-top: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line));
  border-left: 4px solid var(--gold);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
}

.shot-note-icon {
  font-size: 24px;
  line-height: 1;
  flex: none;
  /* Hafif bir parlama efekti */
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 50%, transparent)); 
}

.shot-note-text {
  flex: 1;
}

.shot-note-text strong {
  display: inline-block;
  color: var(--gold);
  margin-right: 6px;
  font-weight: 700;
  font-family: var(--serif);
  font-size: 16px;
}

@media (max-width:820px){
  /* ... mevcut kodlar ... */
  .shot-note { padding: 16px; gap: 12px; font-size: 14.5px; }
}


/* Atış Kutusu Daraltma / Genişletme */
.shot-head {
  cursor: pointer; /* Tıklanabilir olduğunu hissettir */
  user-select: none;
}
.shot-head:hover {
  background: var(--surface2);
}

/* Ok İkonu Dönüşü */
.toggle-btn .chevron {
  transition: transform 0.3s ease;
}
.shot-embed.collapsed .toggle-btn .chevron {
  transform: rotate(-180deg); /* Daralınca yukarı baksın */
}

/* Daraltılmış Durum: Video ve Notlar gizlensin */
.shot-embed.collapsed .shot-frame,
.shot-embed.collapsed .shot-note {
  display: none !important;
}

/* Sadece daraltılmışken alt köşeleri yuvarlat */
.shot-embed.collapsed {
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
.shot-embed.collapsed .shot-head {
  border-bottom: none;
  border-radius: 22px;
}


/* Sidebar Liste Öğeleri */
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-list-item {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border-radius: 10px;
  transition: background 0.15s;
}

.side-list-item:hover {
  background: var(--surface2);
}

/* Başlık (Yazıya gider) */
.side-list-title {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  /* 2 satıra kadar izin ver, sonra kes */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-list-title:hover {
  color: var(--accent);
}

/* Alt bilgi (Kategoriye/Tarihe gider) */
.side-list-meta {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  text-decoration: none;
  width: fit-content;
}
.side-list-meta:hover {
  color: var(--ink2);
  text-decoration: underline;
}

/* Nokta Ayırıcı */
.side-list-meta .sep {
  opacity: 0.5;
  margin: 0 2px;
}

/* --- Atış Başlığı (Shot Head) Özel Koyu Tema --- */
.shot-head {
  /* Her iki temada da koyu bir arka plan gradyanı */
  background: linear-gradient(180deg, #142d24 0%, #0a1712 100%) !important;
  border-bottom: 1px solid #234b3c !important;
  color: #ffffff !important;
  /* Hafif bir iç gölge ve dış parlaklık ile dikkat çekici yap */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Başlık ve alt metin renklerini koyu temaya uygun beyazımsı yap */
.shot-head .shot-title strong {
  color: #e9f2ed !important;
}

.shot-head .shot-title small {
  color: #8da79a !important;
}

/* Üzerine gelince (hover) rengi hafifçe aydınlat */
.shot-head:hover {
  background: linear-gradient(180deg, #1a3a2f 0%, #0e221a 100%) !important;
}

/* Sağdaki yuvarlak butonların (ikonların) rengini koyu temaya uyarla */
.shot-head .icon-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #a9bdb3;
}

.shot-head .icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #19c37d;
  border-color: #19c37d;
}

/* Daraltılmışken çerçevenin alt köşelerinin bozulmaması için */
.shot-embed.collapsed .shot-head {
  border-bottom: none !important;
}


/* Lazy iframe placeholder */
.shot-frame-lazy {
  position: relative;
  background: #0d1117;
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer;
}
.shot-frame-lazy iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.shot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1a2230 0%, #0d1117 70%);
  transition: opacity .2s;
}
.shot-frame-lazy.is-loaded .shot-placeholder { display: none; }

.shot-play-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  color: #cbd5e1;
  font: inherit;
  cursor: pointer;
  padding: 12px;
}
.shot-play-btn svg { transition: transform .15s; }
.shot-play-btn:hover svg { transform: scale(1.08); }
.shot-play-btn span { font-size: 14px; opacity: .85; }


 
 
 /* =========================================
   FORMÜL KARTI & MODAL (Kompakt & Okunaklı)
   ========================================= */

/* --- 1. KÜÇÜK KART --- */
.formula-card {
    position: relative;
    margin: 10px 0; /* Dış boşluk daraltıldı */
    padding: 10px 12px; /* İç boşluk daraltıldı */
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e1e0d6);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
}

.formula-card:hover {
    border-color: var(--accent, #19c37d);
}

/* Üst renk şeridi */
.formula-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, #fff, #ef5b5b, #4da3ff, #e8b94a);
    border-radius: 8px 8px 0 0;
}

/* Formülün Kendisi (Kart İçinde) */
.formula-card-inner {
    display: flex; 
    flex-wrap: wrap; /* Ekrana sığmayanlar alt satıra geçsin */
    align-items: center;
    justify-content: center; /* Ortala */
    gap: 4px; 
    font-family: ui-monospace, Consolas, monospace;
    padding-bottom: 6px; 
}

/* Büyütme İpucu (En altta, formülün altında) */
.formula-card-hint {
    display: block;
    text-align: right;
    font-size: 10px; 
    font-weight: 600; 
    color: var(--muted);
    opacity: 0.6; 
    pointer-events: none;
    margin-top: 2px;
}
.formula-card:hover .formula-card-hint { opacity: 1; color: var(--accent); }


/* --- 2. MODAL (Tam Ekran) --- */
.formula-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(10, 20, 15, 0.85);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.formula-modal.is-open { opacity: 1; pointer-events: auto; }

.formula-modal-content {
    background: var(--surface, #fff);
    width: 100%; max-width: 800px; /* Ekranı tam kaplamasın, ortalansın */
    border-radius: 12px; position: relative;
    transform: scale(0.95); transition: transform 0.2s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.formula-modal.is-open .formula-modal-content { transform: scale(1); }

/* Kapat Butonu */
.formula-modal-close {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface2, #eee); border: 1px solid var(--line);
    color: var(--ink); font-size: 18px; cursor: pointer;
    display: grid; place-items: center; z-index: 10;
    transition: 0.2s;
}
.formula-modal-close:hover { background: #ef5b5b; color: #fff; transform: rotate(90deg); }

/* Modal İçi Formül Alanı */
.formula-modal-inner {
    padding: 30px 15px; /* Üstten ve alttan daralttık */
    display: flex; 
    flex-wrap: wrap; /* Mobilde/taşarsa alt satıra geç */
    align-items: center; 
    justify-content: center;
    gap: 8px; 
    background: var(--surface, #fff);
    border-radius: 12px;
    font-family: ui-monospace, Consolas, monospace;
}


/* --- 3. ORTAK ELEMANLAR (Kutular ve Sayılar) --- */
.formula-item { display: inline-flex; align-items: center; justify-content: center; }

.f-term-group { 
    display: inline-grid; 
    grid-template-rows: auto auto; 
    gap: 2px; 
    text-align: center; 
}

/* Terim Kutuları */
.f-term-box {
    grid-row: 1; 
    padding: 4px 10px; /* Kutu içi boşluk daraltıldı */
    border-radius: 6px; 
    border: 1px solid;
    font-size: 1.05rem; /* Okunabilir ideal boyut */
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    white-space: nowrap;
}

/* Renkler */
.f-term-box[data-c="çıkış"] { color:#fff; background:rgba(0,0,0,.75); border-color:#fff; }
.f-term-box[data-c="atış"]  { color:#ff4747; background:rgba(239,91,91,.1); border-color:#ff4747; }
.f-term-box[data-c="varış"] { color:#2b8cff; background:rgba(77,163,255,.1); border-color:#2b8cff; }
.f-term-box[data-c="falso"] { color:#e0a800; background:rgba(232,185,74,.1); border-color:#e0a800; }
.f-term-box[data-c="custom"] { color:var(--accent); background:rgba(25,195,125,.1); border-color:var(--accent); }

/* Altındaki Sayılar */
.f-term-sub {
    grid-row: 2; 
    font-size: 0.95rem; /* Sayı boyutu netleştirildi */
    font-weight: 800; 
    font-family: ui-monospace, Consolas, monospace;
}
.f-term-group[data-c="çıkış"] .f-term-sub { color: #10201a; }
.f-term-group[data-c="atış"] .f-term-sub { color: #ff4747; }
.f-term-group[data-c="varış"] .f-term-sub { color: #2b8cff; }
.f-term-group[data-c="falso"] .f-term-sub { color: #e0a800; }
.f-term-group[data-c="custom"] .f-term-sub { color: var(--accent); }

/* İşaretler (+, =) */
.f-op-sign { 
    font-size: 1.3rem; 
    font-weight: 800; 
    color: var(--ink2); 
    opacity: 0.5; 
    margin: 0 2px; 
}


/* --- 4. MOBİL EKSTRA AYARLAR --- */
@media (max-width: 768px) {
    .formula-modal-content { margin: 10px; }
    /* Mobilde yazılar biraz daha küçülür ki rahat sığsın */
    .f-term-box { padding: 4px 8px; font-size: 0.95rem; }
    .f-term-sub { font-size: 0.85rem; }
    .f-op-sign { font-size: 1.1rem; margin: 0 1px; }
    .formula-modal-inner { padding: 25px 10px; gap: 6px; }
}
 
 
 /* Sadece mobil ekranlarda çalışacak (Ekran genişliği 768px'den küçükse) */
@media (max-width: 768px) {
    
    .shot-frame {
        /* Ekranın tamamını kapla */
        width: 100vw !important;
        
        /* İşte senin istediğin o meşhur kural */
        min-height: 640px !important;
        height: 640px !important;
        
        /* PHP'den gelen 16:9 gibi sabit oranları iptal et ki boyu 640px olabilsin */
        aspect-ratio: auto !important;
        
        /* Eğer shot-frame normal yazı sütununun içindeyse, dışarı taşıp ekranı kaplasın */
        margin-left: calc(-50vw + 50%);
        
        /* Taşmaları gizle */
        overflow: hidden;
        position: relative;
    }

    .shot-frame iframe {
        width: 100% !important;
        height: 100% !important;
        /* Döndürme, yan yatma YOK */
        transform: none !important; 
        border: none;
    }
}