/* Ayrı alt menü katmanı: tema/düzen paletini ve içerik ekranlarını değiştirmez. */
[data-nav-style] { --kn-surface:#262322; --kn-ink:#fff5ed; --kn-muted:#d4c5bc; --kn-accent:#ff9858; --kn-edge:#635047; --kn-orb:#39312c; }
[data-nav-style="island"] { --kn-surface:#212329; --kn-orb:#2e3037; --kn-accent:#f3ca85; --kn-edge:#65616c; }
[data-nav-style="clay"] { --kn-surface:#423028; --kn-orb:#f1ddc6; --kn-accent:#f3997c; --kn-edge:#95715b; }
[data-nav-style="capsule"] { --kn-surface:#171c25; --kn-orb:#2d3443; --kn-accent:#ff9a36; --kn-edge:#4b5566; }
[data-nav-style="fan"] { --kn-surface:#2d251f; --kn-orb:#3d3026; --kn-accent:#f4ad70; --kn-edge:#91694d; }
#nav[data-nav-style]:not([data-nav-style="classic"]) { position:relative; flex-shrink:0; isolation:isolate; margin:0; padding:12px 6px max(12px,env(safe-area-inset-bottom)); gap:2px; background:var(--kn-surface); border:1px solid var(--kn-edge); border-bottom:0; border-radius:25px 25px 0 0; color:var(--kn-ink); box-shadow:0 -5px 26px #0002; }
#nav[data-nav-style]:not([data-nav-style="classic"]) > button { position:relative; min-width:0; min-height:52px; flex:1 1 0; gap:5px; padding:5px 0; border-radius:17px; color:var(--kn-muted); background:none; box-shadow:none; transform:none; }
#nav[data-nav-style]:not([data-nav-style="classic"]) > button > span { font:600 11px/1.25 system-ui,sans-serif; letter-spacing:0; }
.kn-icon { display:grid; place-items:center; font-style:normal; min-height:26px; }
#nav[data-nav-style]:not([data-nav-style="classic"]) svg { width:25px; height:25px; }
#nav[data-nav-style]:not([data-nav-style="classic"]) > button.active { color:var(--kn-accent); background:#ffffff0d; }
#nav[data-nav-style]:not([data-nav-style="classic"]) > button.active::after { content:""; width:16px; height:3px; background:var(--kn-accent); border-radius:5px; position:absolute; bottom:-4px; }
#nav[data-nav-style]:not([data-nav-style="classic"]) .nav-reels { width:52px; height:52px; margin:-25px 0 0; border-radius:50%; background:linear-gradient(145deg,#ffb477,var(--kn-accent)); color:#382218; border:1px solid #ffddbb88; box-shadow:0 6px 16px #0005,inset 0 1px 3px #fff8; }
#nav[data-nav-style]:not([data-nav-style="classic"]) > button[data-go="reels"] { color:var(--kn-accent); }
#nav[data-nav-style]:not([data-nav-style="classic"]) > button[data-go="reels"].active { background:transparent !important; }
#nav[data-nav-style="glass"] { background:linear-gradient(130deg,#3d302beb,#242220ee) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-color:#b18b675c !important; box-shadow:inset 0 1px 1px #ffe4cc55,0 -5px 22px #0003 !important; }
#nav[data-nav-style="glass"] .nav-reels { box-shadow:0 0 18px #ff9e4c55,inset 0 1px 4px #fff !important; }
#nav[data-nav-style="island"] { margin:0 9px max(8px,env(safe-area-inset-bottom)) !important; padding-bottom:12px !important; border-radius:29px !important; border-bottom:1px solid var(--kn-edge) !important; box-shadow:0 8px 22px #0005 !important; }
#nav[data-nav-style="island"] .nav-reels { outline:5px solid var(--kn-surface); }
#nav[data-nav-style="clay"] { background:linear-gradient(#503b30,#33251f) !important; box-shadow:inset 0 2px 3px #b7917166,0 -6px 20px #0003 !important; }
#nav[data-nav-style="clay"] .kn-icon { color:#f1ddc6; filter:drop-shadow(1px 3px 1px #170c09); }
#nav[data-nav-style="clay"] .nav-reels { background:linear-gradient(145deg,#ffcfaa,#ef987d 65%,#b76653) !important; color:#593f30 !important; box-shadow:inset 2px 2px 4px #ffe6c5,3px 6px 8px #1e110ba6 !important; }
#nav[data-nav-style="capsule"] > button:not([data-go="reels"]) { background:linear-gradient(145deg,#353d4a,#222731) !important; margin:0 2px; }
#nav[data-nav-style="capsule"] > button.active:not([data-go="reels"]) { color:#fff !important; box-shadow:inset 0 0 0 1px var(--kn-accent) !important; }
#nav[data-nav-style="fan"] .nav-reels { outline:4px solid #4a3627; box-shadow:0 0 18px #ee9b493d,inset 0 1px 3px #ffe0b4 !important; }
#nav[data-nav-style] button:focus-visible, .kn-menu button:focus-visible { outline:3px solid #ffbf80; outline-offset:3px; }
.kn-menu { position:absolute; inset:0; z-index:500; color:var(--kn-ink); }
.kn-backdrop { position:absolute; inset:0; background:#100b08c4; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.kn-menu-panel { position:absolute; bottom:var(--kn-bottom); left:50%; transform:translateX(-50%); width:min(100%,390px); height:220px; }
.kn-petal { position:absolute; width:30%; max-width:114px; padding:0; border:0; background:none; color:var(--kn-ink); display:flex; flex-direction:column; align-items:center; gap:9px; min-height:115px; font:600 13px/1.35 system-ui,sans-serif; }
.kn-petal i { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:var(--kn-orb); border:1px solid var(--kn-edge); box-shadow:0 5px 16px #0005,inset 0 1px 1px #ffffff26; color:var(--kn-accent); }
.kn-petal svg { width:31px; height:31px; }
.kn-petal span { max-width:110px; text-align:center; text-shadow:0 1px 4px #0008; }
.kn-films { left:4%; top:87px; }
.kn-sentences { left:35%; top:20px; }
.kn-words { right:4%; top:87px; }
.kn-close { position:absolute; bottom:max(22px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:52px; height:52px; border-radius:50%; border:1px solid var(--kn-edge); color:#382218; background:var(--kn-accent); display:grid; place-items:center; box-shadow:0 4px 18px #0006; }
.kn-menu[data-nav-style="glass"] .kn-petal i { background:linear-gradient(145deg,#a78b7159,#44362fe6); border-color:#d3aa80; box-shadow:inset 0 1px 6px #ffdeaa6b,0 0 16px #efb35c26; }
.kn-menu[data-nav-style="island"] .kn-films i { color:#bf9afb; }
.kn-menu[data-nav-style="island"] .kn-sentences i { color:#fb94a2; }
.kn-menu[data-nav-style="island"] .kn-words i { color:#8bdbe2; }
.kn-menu[data-nav-style="clay"] .kn-petal i { color:#5b4030; border-color:#ffe7ca; background:linear-gradient(140deg,#fff3dc,#e9cbae); box-shadow:inset 2px 3px 5px #fff5,4px 7px 10px #10080699; }
.kn-menu[data-nav-style="clay"] .kn-sentences i { background:linear-gradient(135deg,#ffceaa,#ec957c); }
.kn-menu[data-nav-style="capsule"] .kn-films i { background:linear-gradient(145deg,#429bf4,#0754c6); color:white; border-color:#75b8fa; }
.kn-menu[data-nav-style="capsule"] .kn-sentences i { background:linear-gradient(145deg,#a072ee,#6936cb); color:white; border-color:#c49dff; }
.kn-menu[data-nav-style="capsule"] .kn-words i { background:linear-gradient(145deg,#36bf8c,#057e5d); color:white; border-color:#5adfb4; }
.kn-menu[data-nav-style="fan"] .kn-menu-panel { height:232px; border-radius:190px 190px 0 0; background:conic-gradient(from -90deg at 50% 100%,#3c3027 0deg 59deg,#896448 59deg 60deg,#4d3a2b 60deg 119deg,#896448 119deg 120deg,#3c3027 120deg 180deg,transparent 180deg); box-shadow:inset 0 1px 0 #b68c614a; }
.kn-menu[data-nav-style="fan"] .kn-petal i { width:61px; height:61px; background:#37291f; border:2px solid #dba373; }
.kn-menu[data-nav-style="fan"] .kn-films,.kn-menu[data-nav-style="fan"] .kn-words { top:105px; }
.kn-menu[data-nav-style="fan"] .kn-sentences { top:24px; }
.kn-settings { margin-top:18px; }
.kn-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.kn-choice { min-width:0; display:flex; flex-direction:column; gap:6px; text-align:left; padding:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:16px; font:inherit; }
.kn-choice[aria-pressed="true"] { border:2px solid var(--primary); padding:8px; }
.kn-choice-name { font-size:13px; font-weight:750; }
.kn-choice small { font-size:12px; color:var(--muted); line-height:1.35; }
.kn-choice-check { font-size:12px; font-weight:750; color:var(--primary); }
.kn-mini { width:100%; height:106px; position:relative; overflow:hidden; border-radius:11px; display:block; background:linear-gradient(145deg,#49382c,#151416); }
.kn-mini i { display:grid; place-items:center; font-style:normal; }
.kn-mini svg { width:16px; height:16px; }
.kn-mini-orbit { position:absolute; left:5%; right:5%; top:8px; display:flex; justify-content:space-around; height:52px; align-items:end; }
.kn-mini-orbit i { width:30px; height:30px; border:1px solid var(--kn-edge); border-radius:50%; background:var(--kn-orb); color:var(--kn-accent); }
.kn-mini-orbit i:nth-child(2) { align-self:start; }
.kn-mini-dock { position:absolute; bottom:6px; left:5px; right:5px; height:30px; border-radius:12px; display:flex; align-items:center; justify-content:space-around; background:var(--kn-surface); color:var(--kn-ink); border:1px solid var(--kn-edge); }
.kn-mini-dock i:nth-child(3) { background:var(--kn-accent); color:#382218; border-radius:50%; width:28px; height:28px; margin-top:-12px; }
.kn-mini[data-nav-style="glass"] .kn-mini-dock,.kn-mini[data-nav-style="glass"] .kn-mini-orbit i { background:linear-gradient(120deg,#c3a18066,#382d2788); border-color:#e7bd8788; box-shadow:inset 0 1px 3px #fff5; }
.kn-mini[data-nav-style="island"] .kn-mini-dock { bottom:9px; border-radius:18px; box-shadow:0 5px 7px #0008; }
.kn-mini[data-nav-style="island"] .kn-mini-orbit i:nth-child(1) { color:#bf9afb; }
.kn-mini[data-nav-style="island"] .kn-mini-orbit i:nth-child(2) { color:#fb94a2; }
.kn-mini[data-nav-style="island"] .kn-mini-orbit i:nth-child(3) { color:#8bdbe2; }
.kn-mini[data-nav-style="clay"] .kn-mini-orbit i { color:#5b4030; background:linear-gradient(135deg,#fff3dc,#e0c0a2); box-shadow:2px 3px 3px #0005; }
.kn-mini[data-nav-style="capsule"] .kn-mini-dock i { padding:3px; background:#3b4250; border-radius:6px; }
.kn-mini[data-nav-style="capsule"] .kn-mini-orbit i:nth-child(1) { background:#177ce4; color:#fff; }
.kn-mini[data-nav-style="capsule"] .kn-mini-orbit i:nth-child(2) { background:#8350d7; color:#fff; }
.kn-mini[data-nav-style="capsule"] .kn-mini-orbit i:nth-child(3) { background:#098860; color:#fff; }
.kn-mini[data-nav-style="fan"] .kn-mini-orbit { background:conic-gradient(from -90deg at 50% 100%,#73543b 0deg 59deg,#bc885b 59deg 60deg,#4e3c2e 60deg 119deg,#bc885b 119deg 120deg,#73543b 120deg 180deg,transparent 180deg); border-radius:80px 80px 0 0; }
.kn-watch-tabs { display:flex; gap:4px; flex-shrink:0; padding:4px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.kn-watch-tabs button { flex:1; min-width:0; min-height:44px; border:0; border-radius:10px; font:600 12px/1.3 system-ui,sans-serif; background:transparent; color:var(--ink); }
.kn-watch-tabs button[aria-pressed="true"] { background:var(--primary); color:var(--koci-on-primary,#fff); }
#screen:has(.kn-watch-tabs) .vd-sarmal { flex:1; min-height:220px; }
#screen:has(.kn-watch-tabs) .vd-akis { height:100%; }
.kn-menu-panel { animation:kn-rise .18s ease-out; }
@keyframes kn-rise { from { transform:translate(-50%,16px); opacity:.4; } to { transform:translate(-50%,0); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .kn-menu-panel { animation:none; } #nav[data-nav-style] button { transition:none; } }
@media (max-width:340px) { .kn-petal i { width:62px; height:62px; } .kn-petal { font-size:12px; } .kn-choices { gap:8px; } }
body.tv #nav[data-nav-style]:not([data-nav-style="classic"]) > button { min-height:68px; }
body.tv #nav[data-nav-style]:not([data-nav-style="classic"]) > button > span { font-size:16px; }
body.tv .kn-menu-panel { width:450px; max-width:100%; }
body.tv .kn-petal { font-size:16px; }
/* klasik stil de SVG (30 Eyl): emoji boyutunda sade çizgi simge */
#nav[data-nav-style="classic"] .kn-icon svg { width:24px; height:24px; }
#nav button { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }