/* ═══════════════════════════════════════════════════════════
   BİLİŞİMCİ HOCAM — BH-SUBPAGE.CSS  v1.0
   Alt Sayfa Ortak Stilleri (modul.html, konu.html, vb.)
   
   Birleştirilen dosyalar:
   - yp_layout.css, rk_layout.css, mp_layout.css
   - yp_global.css, rk_global.css, mp_global.css
   
   Bölüm ayrımı: data-module="yz|rk|mp"
   Renk tokenlari: --primary, --secondary, --c1..c8, --mod-color, --mod-rgb
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   SAYFA TEMELİ
   ═══════════════════════════════════════ */
body { padding-bottom:0; }
#app {
  display:flex;
  flex-direction:column;
  height:100dvh;
  padding-bottom:clamp(36px, 3vw, 48px);
  overflow:hidden;
}
a { color:inherit; text-decoration:none; }


/* ═══════════════════════════════════════
   HEADER (alt sayfa versiyonu — 60px)
   ═══════════════════════════════════════ */
header {
  flex-shrink:0; height:60px; z-index:100;
  border-bottom:1px solid var(--border);
  transition: background .4s, border-color .4s;
}
.header-inner, .h-in {
  width:100%; padding:0 32px; height:100%;
  display:flex; align-items:center; gap:20px;
}
.logo-i { width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:#fff; }
.logo-m { font-family:'Montserrat',sans-serif; font-weight:800; font-size:.95rem; color:var(--text1); }
.logo-m span { color:var(--primary); }
.logo-s { display:block; font-size:.6rem; color:var(--text3); letter-spacing:.1em; }

.hnav { display:flex; gap:2px; flex:1; }
.hnav a { padding:6px 11px; border-radius:6px; font-size:.77rem; color:var(--text2); transition:color .2s,background .2s; white-space:nowrap; }
.hnav a:hover { color:var(--text1); background:var(--nav-hover); }
.hnav a.act { color:var(--primary); background:var(--nav-active); }
.hright { display:flex; align-items:center; gap:8px; margin-left:auto; }
.btn-bk { display:flex; align-items:center; gap:7px; padding:7px 16px; border-radius:8px; border:1px solid var(--border2); font-size:.75rem; color:var(--text2); transition:all .2s; text-decoration:none; }
.btn-bk:hover { border-color:var(--primary); color:var(--primary); }

/* Arama — subnav içi */
.sb-wrap { display:flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:5px 13px 5px 10px; cursor:pointer; transition:border-color .2s,background .2s; }
.sb-wrap:hover { border-color:var(--border2); background:var(--bg4); }
.sb-wrap i { font-size:.75rem; color:var(--text3); pointer-events:none; }
.sb-wrap input { background:none; border:none; outline:none; font-size:.75rem; color:var(--text2); width:90px; cursor:pointer; font-family:inherit; }
@media(max-width:600px) { .sb-wrap input{display:none;} .sb-wrap{padding:6px 8px;} }


/* ═══════════════════════════════════════
   SUBNAV (Breadcrumb + Anchor Bağlantıları)
   ═══════════════════════════════════════ */
.subnav {
  flex-shrink:0; position:sticky; top:60px; z-index:190;
  background:var(--bg2); border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px); transition:background .4s,border-color .4s;
}
.subnav-inner { display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none; gap:0; padding:0 32px; }
.subnav-inner::-webkit-scrollbar { display:none; }

/* Breadcrumb */
.sn-breadcrumb { display:flex; align-items:center; gap:0; padding:0 14px; border-right:1px solid var(--border); flex-shrink:0; }
.sn-bc-link { display:flex; align-items:center; gap:5px; padding:7px 8px; font-size:.69rem; font-weight:700; color:var(--text2); border-radius:7px; transition:all .18s; white-space:nowrap; }
.sn-bc-link:hover { color:var(--text1); background:rgba(255,255,255,.06); }
.sn-bc-link .sn-ico { width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.58rem; background:rgba(255,255,255,.08); }
.sn-bc-sep { color:var(--text3); font-size:.75rem; padding:0 1px; flex-shrink:0; }
.sn-bc-current { display:flex; align-items:center; gap:6px; padding:5px 9px; font-size:.69rem; font-weight:700; border-radius:7px; white-space:nowrap; background:rgba(var(--sn-rgb),.13); color:var(--sn-color); }
.sn-bc-current .sn-badge { width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.58rem; background:rgba(var(--sn-rgb),.22); color:var(--sn-color); }
.sn-step-tag { font-size:.55rem; opacity:.65; margin-left:3px; background:rgba(var(--sn-rgb),.15); padding:2px 5px; border-radius:4px; }
.sn-divider { width:1px; background:var(--border); align-self:stretch; flex-shrink:0; }

/* Anchor linkler */
.sn-anchors { display:flex; align-items:center; padding:0 6px; flex:1; overflow-x:auto; scrollbar-width:thin; gap:2px; }
.sn-anchors::-webkit-scrollbar { height:3px; }
.sn-anchors::-webkit-scrollbar-track { background:var(--bg4); }
.sn-anchors::-webkit-scrollbar-thumb { background:var(--primary); border-radius:3px; }
.sn-anchor { display:flex; align-items:center; gap:4px; padding:0 10px; height:40px; font-size:.67rem; font-weight:600; color:var(--text3); white-space:nowrap; border-bottom:2px solid transparent; transition:color .18s,border-color .18s; }
.sn-anchor i { font-size:.6rem; }
.sn-anchor:hover { color:var(--text1); }
.sn-anchor.active { color:var(--sn-color); border-bottom-color:var(--sn-color); }

/* Krem tema subnav */
[data-theme="krem"] .sn-bc-link:hover,
[data-theme="cream"] .sn-bc-link:hover { background:rgba(0,0,0,.05); }
[data-theme="krem"] .subnav,
[data-theme="cream"] .subnav { background:rgba(245,240,232,.97); }
[data-theme="krem"] .sn-bc-link .sn-ico,
[data-theme="cream"] .sn-bc-link .sn-ico { background:rgba(0,0,0,.06); }

/* Alt sayfa subnav (modul, sss, alıştırma sayfaları) */
.mod-subnav { flex-shrink:0; background:var(--bg2); border-bottom:1px solid var(--border); padding:6px 0; min-height:48px; }
.mod-subnav-inner { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:0 32px; }
.mod-subnav-inner .subnav-link { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; font-size:.78rem; font-weight:500; color:var(--text2); border-radius:30px; background:transparent; border:1px solid transparent; transition:all .2s; text-decoration:none; white-space:nowrap; }
.mod-subnav-inner .subnav-link:hover { color:var(--primary); background:rgba(var(--primary-rgb),.08); border-color:rgba(var(--primary-rgb),.2); }
.mod-subnav-inner .subnav-link.sn-act { color:var(--primary); background:rgba(var(--primary-rgb),.12); border-color:rgba(var(--primary-rgb),.3); }
.mod-subnav-inner .subnav-link i { font-size:.7rem; }


/* ═══════════════════════════════════════
   MOD-HERO (Modül Sayfası Hero)
   ═══════════════════════════════════════ */
.mod-hero {
  flex:1; min-height:0;
  display:flex; align-items:stretch;
  position:relative; overflow:hidden;
  background:linear-gradient(170deg, var(--bg1) 0%, var(--bg2) 100%);
  transition:background .4s;
}
.mod-hero::before {
  content:''; position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid,rgba(255,255,255,.022)) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid,rgba(255,255,255,.022)) 1px,transparent 1px);
  background-size:52px 52px;
}
.mod-hero::after {
  content:''; position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 50% 60% at 72% 50%, var(--glow1,rgba(var(--primary-rgb),.08)),transparent),
    radial-gradient(ellipse 30% 40% at 20% 70%, var(--glow2,rgba(var(--primary-rgb),.04)),transparent);
}
.hero-left { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:20px 3vw 14px 5vw; position:relative; z-index:2; }
.hero-right { width:clamp(240px,36vw,500px); flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:14px 3vw 14px 1vw; position:relative; z-index:2; overflow:hidden; }

/* Breadcrumb */
.mod-crumb { font-size:.72rem; color:var(--text3); margin-bottom:9px; display:flex; align-items:center; gap:6px; }
.mod-crumb a { color:var(--primary); }
.mod-crumb a:hover { text-decoration:underline; }

/* Hero başlık */
.mod-hero-label { font-size:.67rem; font-weight:700; letter-spacing:.30em; color:var(--primary); text-transform:uppercase; margin-bottom:9px; }
.mod-hero-h1 { font-family:'Montserrat',sans-serif; font-size:clamp(1.8rem,3.8vw,3.4rem); font-weight:800; line-height:1.08; margin-bottom:11px; letter-spacing:-.015em; color:var(--text1); }
.mod-hero-h1 .grad { background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mod-hero-desc { font-size:clamp(.8rem,1.25vw,.94rem); color:var(--text2); line-height:1.75; max-width:560px; }
.mod-hero-underline { width:100%; height:3px; background:linear-gradient(90deg,var(--primary),var(--secondary),transparent); border-radius:3px; margin:8px 0; }

/* İlerleme çubuğu */  
.mod-ilerleme { display:flex; align-items:center; gap:10px; margin-top:-6px; padding:8px 12px 8px 16px; background:var(--bg3); border:1px solid var(--border); border-radius:11px; box-shadow:0 10px 28px rgba(0,0,0,.16); }
.mod-il-label { font-size:.66rem; font-weight:700; color:var(--text3); white-space:nowrap; }
.mod-il-track { flex:1; height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.mod-il-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--primary),var(--secondary)); transition:width .6s cubic-bezier(.4,0,.2,1); }
.mod-il-sayi { font-size:.66rem; font-weight:700; color:var(--primary); white-space:nowrap; }
.mod-il-sifirla { font-size:.6rem; color:var(--text3); cursor:pointer; text-decoration:underline; flex-shrink:0; transition:color .18s; }
.mod-il-sifirla:hover { color:var(--text1); }
.next-topic-info {
  margin-left:auto;
  min-width:min(250px, 34%);
  max-width:360px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.18),rgba(255,255,255,.045));
  border:1px solid rgba(var(--primary-rgb),.24);
  color:var(--text1);
  text-decoration:none;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nti-icon {
  width:26px;
  height:26px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 6px 16px rgba(var(--primary-rgb),.25);
  font-size:.72rem;
}
.nti-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.nti-label { font:800 .52rem/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.nti-title { font:800 .72rem/1.15 'Montserrat',sans-serif; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ═══════════════════════════════════════
   PIPELINE — YZ Stil (Arc/Daire)
   ═══════════════════════════════════════ */
.mod-timeline { display:flex; align-items:flex-start; width:100%; margin-top:13px; }
.mod-step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; opacity:0; animation:modRise .5s ease forwards; }
.mod-step:nth-child(1){animation-delay:.07s;} .mod-step:nth-child(3){animation-delay:.15s;} .mod-step:nth-child(5){animation-delay:.23s;} .mod-step:nth-child(7){animation-delay:.31s;} .mod-step:nth-child(9){animation-delay:.39s;} .mod-step:nth-child(11){animation-delay:.47s;} .mod-step:nth-child(13){animation-delay:.55s;} .mod-step:nth-child(15){animation-delay:.63s;}
@keyframes modRise { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }

.mod-visual { position:relative; width:100%; display:flex; align-items:center; justify-content:center; height:110px; }
.mod-arc { position:absolute; width:28px; height:92px; border:2.5px solid; }
.mod-arc--left { left:3px; border-right:none; border-radius:46px 0 0 46px; }
.mod-arc--right { right:3px; left:auto; border-left:none; border-radius:0 46px 46px 0; }
.mod-arc--left::before,.mod-arc--left::after,.mod-arc--right::before,.mod-arc--right::after { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:currentColor; }
.mod-arc--left::before{top:-3px;right:-3px;} .mod-arc--left::after{bottom:-3px;right:-3px;} .mod-arc--right::before{top:-3px;left:-3px;} .mod-arc--right::after{bottom:-3px;left:-3px;}
.mod-circle { width:82px; height:82px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; position:relative; box-shadow:0 8px 26px rgba(0,0,0,.5); transition:transform .28s,box-shadow .28s; cursor:pointer; }
.mod-circle:hover { transform:scale(1.1) translateY(-5px); box-shadow:0 18px 38px rgba(0,0,0,.6); }
.mod-circle svg { filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.mod-letter { position:absolute; bottom:3px; right:3px; width:32px; height:32px; border-radius:50%; background:var(--bg1); border:2.5px solid; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.82rem; z-index:3; box-shadow:0 3px 10px rgba(0,0,0,.5); transition:background .4s; }
.mod-label { margin-top:7px; text-align:center; padding:0 2px; }
.mod-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:3px; }
.mod-desc { font-size:.56rem; color:var(--text3); line-height:1.5; }
.mod-line { width:10px; height:3px; margin-top:53px; flex-shrink:0; border-radius:2px; }

/* 8 Adım Renkleri */
.mods1 .mod-arc{border-color:var(--c1);color:var(--c1);} .mods1 .mod-circle{background:linear-gradient(135deg,var(--c1),#c0286a);} .mods1 .mod-letter{border-color:var(--c1);color:var(--c1);} .mods1 .mod-title{color:var(--c1);}
.mods2 .mod-arc{border-color:var(--c2);color:var(--c2);} .mods2 .mod-circle{background:linear-gradient(135deg,var(--c2),#b07400);} .mods2 .mod-letter{border-color:var(--c2);color:var(--c2);} .mods2 .mod-title{color:var(--c2);}
.mods3 .mod-arc{border-color:var(--c3);color:var(--c3);} .mods3 .mod-circle{background:linear-gradient(135deg,var(--c3),#2e7a46);} .mods3 .mod-letter{border-color:var(--c3);color:var(--c3);} .mods3 .mod-title{color:var(--c3);}
.mods4 .mod-arc{border-color:var(--c4);color:var(--c4);} .mods4 .mod-circle{background:linear-gradient(135deg,var(--c4),#1a6e68);} .mods4 .mod-letter{border-color:var(--c4);color:var(--c4);} .mods4 .mod-title{color:var(--c4);}
.mods5 .mod-arc{border-color:var(--c5);color:var(--c5);} .mods5 .mod-circle{background:linear-gradient(135deg,var(--c5),#1a4f62);} .mods5 .mod-letter{border-color:var(--c5);color:var(--c5);} .mods5 .mod-title{color:var(--c5);}
.mods6 .mod-arc{border-color:var(--c6);color:var(--c6);} .mods6 .mod-circle{background:linear-gradient(135deg,var(--c6),#4a1dba);} .mods6 .mod-letter{border-color:var(--c6);color:var(--c6);} .mods6 .mod-title{color:var(--c6);}
.mods7 .mod-arc{border-color:var(--c7);color:var(--c7);} .mods7 .mod-circle{background:linear-gradient(135deg,var(--c7),#007aaa);} .mods7 .mod-letter{border-color:var(--c7);color:var(--c7);} .mods7 .mod-title{color:var(--c7);}
.mods8 .mod-arc{border-color:var(--c8);color:var(--c8);} .mods8 .mod-circle{background:linear-gradient(135deg,var(--c8),#b84000);} .mods8 .mod-letter{border-color:var(--c8);color:var(--c8);} .mods8 .mod-title{color:var(--c8);}

/* Bağlantı çizgi renkleri */
.mod-line--1{background:linear-gradient(to right,var(--c1),var(--c2));} .mod-line--2{background:linear-gradient(to right,var(--c2),var(--c3));} .mod-line--3{background:linear-gradient(to right,var(--c3),var(--c4));} .mod-line--4{background:linear-gradient(to right,var(--c4),var(--c5));} .mod-line--5{background:linear-gradient(to right,var(--c5),var(--c6));} .mod-line--6{background:linear-gradient(to right,var(--c6),var(--c7));} .mod-line--7{background:linear-gradient(to right,var(--c7),var(--c8));}

/* İlerleme rozeti */
.mod-ziyaret { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:#5BAD6F; border:2.5px solid var(--bg1); display:none; align-items:center; justify-content:center; font-size:.52rem; color:#fff; font-weight:800; z-index:10; box-shadow:0 2px 6px rgba(91,173,111,.4); }
.mod-ziyaret.goster { display:flex; }
[data-theme="krem"] .mod-ziyaret,[data-theme="cream"] .mod-ziyaret { border-color:#f5f0e8; }

/* Canvas wrap */
.mod-canvas-wrap { position:relative; width:min(30vw,400px); aspect-ratio:1/1; }
.mod-canvas-glow { position:absolute; inset:-16%; border-radius:50%; background:radial-gradient(circle,var(--glow1,rgba(var(--primary-rgb),.16)) 0%,transparent 65%); animation:modGlowPulse 3.5s ease-in-out infinite; }
@keyframes modGlowPulse { 0%,100%{opacity:.45;transform:scale(1);} 50%{opacity:1;transform:scale(1.08);} }
.mod-canvas { width:100%; height:100%; display:block; }


/* ═══════════════════════════════════════
   PIPELINE — RK Stil (Pipeline Kartları)
   ═══════════════════════════════════════ */
.pipeline-row-top,.pipeline-row-bottom { display:flex; justify-content:center; gap:clamp(14px,2vw,24px); position:relative; z-index:5; flex-wrap:wrap; }
.pipeline-row-top { margin-bottom:clamp(20px,3vh,32px); }
.pipeline-card {
  width:clamp(170px,12vw,220px); height:clamp(132px,15vh,150px);
  background:linear-gradient(145deg,var(--bg3),var(--bg2));
  border-radius:24px;
  padding:clamp(12px,1.2vw,16px) 12px 52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s cubic-bezier(.2,.9,.4,1);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.1);
  position:relative; overflow:hidden;
  animation:floatWave 2.5s ease-in-out infinite;
  animation-delay:calc(var(--delay,0) * .1s);
  z-index:10;
}
.pipeline-card[data-color="1"]{background:linear-gradient(145deg,var(--c1),color-mix(in srgb,var(--c1),#000 35%));}
.pipeline-card[data-color="2"]{background:linear-gradient(145deg,var(--c2),color-mix(in srgb,var(--c2),#000 35%));}
.pipeline-card[data-color="3"]{background:linear-gradient(145deg,var(--c3),color-mix(in srgb,var(--c3),#000 35%));}
.pipeline-card[data-color="4"]{background:linear-gradient(145deg,var(--c4),color-mix(in srgb,var(--c4),#000 35%));}
.pipeline-card[data-color="5"]{background:linear-gradient(145deg,var(--c5),color-mix(in srgb,var(--c5),#000 35%));}
.pipeline-card[data-color="6"]{background:linear-gradient(145deg,var(--c6),color-mix(in srgb,var(--c6),#000 35%));}
.pipeline-card[data-color="7"]{background:linear-gradient(145deg,var(--c7),color-mix(in srgb,var(--c7),#000 35%));}
.pipeline-card[data-color="8"]{background:linear-gradient(145deg,var(--c8),color-mix(in srgb,var(--c8),#000 35%));}
.pipeline-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); transition:left .5s ease; pointer-events:none; }
.pipeline-card:hover::before { left:100%; }
.pipeline-card:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 14px 28px rgba(0,0,0,.35); border-color:rgba(255,255,255,.25); z-index:20; }
.pipeline-card-icon { font-size:clamp(1.9rem,2.4vw,2.6rem); margin-bottom:6px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.3); flex-shrink:0; }
.pipeline-card-title {
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:clamp(.76rem,.9vw,.96rem);
  line-height:1.15;
  color:#fff;
  text-align:center;
  padding:8px 10px;
  max-width:none;
  min-height:34px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  border-radius:14px;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  text-shadow:0 2px 8px rgba(0,0,0,.72);
}
.pipeline-card.completed { opacity:.7; filter:grayscale(.15); border:1px solid #10b981; position:relative; }
.pipeline-card.completed::after { content:'✓'; position:absolute; top:8px; right:12px; font-size:1.2rem; font-weight:bold; color:#10b981; text-shadow:0 0 4px rgba(16,185,129,.5); }
@keyframes floatWave { 0%{transform:translateY(0);} 50%{transform:translateY(-4px);} 100%{transform:translateY(0);} }
.pipeline-card:nth-child(1){--delay:1;} .pipeline-card:nth-child(2){--delay:2;} .pipeline-card:nth-child(3){--delay:3;} .pipeline-card:nth-child(4){--delay:4;} .pipeline-card:nth-child(5){--delay:5;} .pipeline-card:nth-child(6){--delay:6;} .pipeline-card:nth-child(7){--delay:7;} .pipeline-card:nth-child(8){--delay:8;}

[data-module="mp"] .pipeline-card-icon {
  display:block;
  background:transparent;
  border:0;
  box-shadow:none;
  width:auto;
  height:auto;
  border-radius:0;
  color:#fff;
}

/* ═══════════════════════════════════════
   PAGE TITLE (Konu sayfası başlık)
   ═══════════════════════════════════════ */
.page-title { padding:22px 4vw 0; }
.pt-badge { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; background:rgba(var(--mod-rgb),.08); border:1px solid rgba(var(--mod-rgb),.22); border-radius:30px; padding:5px 14px; }
.pt-badge span { font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mod-color); }
.pt-h1 { font-family:'Montserrat',sans-serif; font-size:clamp(1.7rem,4vw,2.6rem); font-weight:900; line-height:1.1; letter-spacing:-.02em; margin-bottom:10px; }
.pt-h1 .g { background:linear-gradient(110deg,var(--primary) 0%,var(--secondary) 60%,var(--accent,var(--primary)) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pt-desc { font-size:.9rem; color:var(--text2); line-height:1.75; max-width:680px; margin-bottom:18px; }
.chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.chip { display:flex; align-items:center; gap:6px; background:var(--bg4); border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:.72rem; color:var(--text2); }
.chip i { font-size:.75rem; }
.chip-tamamla { display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:20px; font-size:.75rem; font-weight:700; cursor:pointer; border:2px solid var(--border2); background:transparent; color:var(--text2); transition:all .22s; margin-left:auto; white-space:nowrap; }
.chip-tamamla:hover { border-color:var(--c3); color:var(--c3); background:rgba(91,173,111,.08); }
.chip-tamamla.tamamlandi { background:var(--c3); border-color:var(--c3); color:#fff; }


/* ═══════════════════════════════════════
   ANA LAYOUT (sidebar + içerik)
   ═══════════════════════════════════════ */
.layout { padding:28px 4vw 80px; display:flex !important; gap:26px; flex-wrap:nowrap; }
.mc { flex:1 !important; min-width:0; display:flex; flex-direction:column; gap:22px; }
.sc { width:300px !important; flex-shrink:0; display:flex; flex-direction:column; gap:14px; }


/* ═══════════════════════════════════════
   SECTION BİLEŞENLERİ
   ═══════════════════════════════════════ */
.sec { background:var(--bg3); border:1px solid var(--border); border-radius:20px; overflow:hidden; opacity:1; animation:ri .5s ease forwards; transition:background .4s,border-color .4s; }
.sec:nth-child(1){animation-delay:.04s;} .sec:nth-child(2){animation-delay:.10s;} .sec:nth-child(3){animation-delay:.16s;} .sec:nth-child(4){animation-delay:.22s;} .sec:nth-child(5){animation-delay:.28s;} .sec:nth-child(6){animation-delay:.34s;} .sec:nth-child(7){animation-delay:.40s;} .sec:nth-child(8){animation-delay:.46s;}
@keyframes ri { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.shd { display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--border); }
.sico { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.shd h2 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:.97rem; color:var(--text1); }
.snum { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--text3); letter-spacing:.1em; }
.sbd { padding:22px; }
.prose { font-size:.84rem; color:var(--text2); line-height:1.8; margin-bottom:18px; }
.prose strong { color:var(--text1); font-weight:600; }


/* ═══════════════════════════════════════
   KAVRAM KARTLARI
   ═══════════════════════════════════════ */
.cg { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; }
.cc { background:var(--bg4); border:1px solid var(--border); border-radius:14px; padding:16px 14px; border-left:3px solid; transition:transform .2s,box-shadow .2s; }
.cc:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.22); }
.ccn { font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:600; letter-spacing:.12em; margin-bottom:7px; }
.cct { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.85rem; margin-bottom:5px; }
.ccd { font-size:.72rem; color:var(--text3); line-height:1.6; }


/* ═══════════════════════════════════════
   SORU-CEVAP (Accordion)
   ═══════════════════════════════════════ */
.qa-list { display:flex; flex-direction:column; gap:0; }
.qa-item { border-bottom:1px solid var(--border); }
.qa-item:last-child { border-bottom:none; }
.qa-soru { display:flex; align-items:flex-start; gap:12px; padding:14px 4px; cursor:pointer; user-select:none; }
.qa-soru-ikon { width:26px; height:26px; border-radius:8px; background:rgba(var(--mod-rgb),.12); color:var(--mod-color); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex-shrink:0; font-family:'Montserrat',sans-serif; }
.qa-soru-text { font-size:.85rem; font-weight:600; color:var(--text1); flex:1; line-height:1.5; padding-top:3px; }
.qa-arrow { font-size:.7rem; color:var(--text3); margin-left:auto; padding-top:4px; transition:transform .25s; flex-shrink:0; }
.qa-item.acik .qa-arrow { transform:rotate(90deg); color:var(--mod-color); }
.qa-item.acik .qa-soru-ikon { background:rgba(var(--mod-rgb),.18); }
.qa-cevap { display:none; padding:0 4px 16px 38px; }
.qa-item.acik .qa-cevap { display:block; }
.qa-cevap p { font-size:.83rem; color:var(--text2); line-height:1.85; margin-bottom:8px; }
.qa-cevap p:last-child { margin-bottom:0; }
.qa-cevap strong { color:var(--text1); }
.qa-ornek { background:var(--bg4); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin:8px 0; font-size:.79rem; color:var(--text2); line-height:1.7; }
.qa-ornek b { color:var(--c2); }


/* ═══════════════════════════════════════
   SEVİYE SEKMELERİ
   ═══════════════════════════════════════ */
.lv-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.lv-tab { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:.72rem; font-weight:700; border:1.5px solid; cursor:pointer; transition:opacity .2s; }
.lv-tab:hover { opacity:.8; }
.lv-tab.lv-aktif { box-shadow:0 0 0 2px currentColor; }
.lv-tab[class*="ort"] { background:rgba(91,173,111,.10); border-color:rgba(91,173,111,.35); color:var(--c3); }
.lv-tab[class*="lise"] { background:rgba(0,207,255,.10); border-color:rgba(0,207,255,.35); color:var(--c7); }
.lv-tab[class*="mes"] { background:rgba(240,165,0,.10); border-color:rgba(240,165,0,.35); color:var(--c2); }
.sev-blok { display:none; }
.sev-blok.aktif { display:block; }
.sev-ayrac { display:flex; align-items:center; gap:10px; margin:20px 0 14px; }
.sev-ayrac-cizgi { flex:1; height:1px; background:var(--border); }
.sev-ayrac-etiket { font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 12px; border-radius:20px; white-space:nowrap; }
.sa-ort  { background:rgba(91,173,111,.12); color:var(--c3); border:1px solid rgba(91,173,111,.28); }
.sa-lise { background:rgba(0,207,255,.12); color:var(--c7); border:1px solid rgba(0,207,255,.28); }
.sa-mes  { background:rgba(240,165,0,.12); color:var(--c2); border:1px solid rgba(240,165,0,.28); }


/* ═══════════════════════════════════════
   HİKAYE KUTUSU
   ═══════════════════════════════════════ */
.hikaye { background:linear-gradient(135deg,rgba(var(--primary-rgb),.06) 0%,rgba(124,58,237,.06) 100%); border:1.5px solid rgba(var(--primary-rgb),.2); border-radius:16px; padding:20px 22px; margin-bottom:16px; position:relative; overflow:hidden; }
.hikaye::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(to bottom,var(--primary),var(--secondary)); }
.hikaye-baslik { font-family:'Montserrat',sans-serif; font-weight:800; font-size:.82rem; color:var(--primary); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.hikaye p { font-size:.85rem; color:var(--text2); line-height:1.85; margin-bottom:8px; }
.hikaye p:last-child { margin-bottom:0; }
.hikaye strong { color:var(--text1); }
.hikaye em { color:var(--primary); font-style:normal; font-weight:600; }


/* ═══════════════════════════════════════
   VURGU KUTUSU
   ═══════════════════════════════════════ */
.vurgu { border-radius:12px; padding:14px 18px; margin:12px 0; font-size:.83rem; line-height:1.8; border-left:4px solid; }
.vurgu-mavi    { background:rgba(0,207,255,.07);  border-color:var(--c7); color:var(--text2); }
.vurgu-turuncu { background:rgba(240,165,0,.07);  border-color:var(--c2); color:var(--text2); }
.vurgu-yesil   { background:rgba(91,173,111,.07); border-color:var(--c3); color:var(--text2); }
.vurgu-teal    { background:rgba(61,170,160,.07); border-color:var(--c4); color:var(--text2); }
.vurgu-purple  { background:rgba(124,58,237,.07); border-color:var(--c6); color:var(--text2); }
.vurgu-cyan    { background:rgba(0,207,255,.07);  border-color:var(--c7); color:var(--text2); }
.vurgu-orange  { background:rgba(249,115,22,.07); border-color:var(--c8); color:var(--text2); }
.vurgu strong { color:var(--text1); }


/* ═══════════════════════════════════════
   GÜNLÜK HAYAT GRİDİ
   ═══════════════════════════════════════ */
.gh-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:10px; margin-top:10px; }
.gh-kart { background:var(--bg4); border:1px solid var(--border); border-radius:12px; padding:14px; text-align:center; transition:transform .2s,border-color .2s; }
.gh-kart:hover { transform:translateY(-3px); border-color:var(--primary); }
.gh-emoji { font-size:1.8rem; margin-bottom:8px; }
.gh-baslik { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.75rem; color:var(--text1); margin-bottom:4px; }
.gh-acik { font-size:.7rem; color:var(--text3); line-height:1.55; }


/* ═══════════════════════════════════════
   TABLO
   ═══════════════════════════════════════ */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { padding:10px 14px; text-align:left; font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:700; color:var(--text3); letter-spacing:.09em; text-transform:uppercase; border-bottom:2px solid var(--border); }
.tbl td { padding:10px 14px; font-size:.78rem; color:var(--text2); border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,255,255,.025); }
.tg   { display:inline-flex; padding:2px 9px; border-radius:5px; font-size:.61rem; font-weight:700; }
.tg-g { background:rgba(16,185,129,.12); color:#10b981; }
.tg-o { background:rgba(249,115,22,.12); color:#f97316; }
.tg-b { background:rgba(0,207,255,.12); color:var(--primary); }
.tg-p { background:rgba(124,58,237,.12); color:#7c3aed; }
.tg-r { background:rgba(239,68,68,.12); color:#ef4444; }
.tg-s { background:rgba(100,116,139,.12); color:#64748b; }
.tg-t { background:rgba(61,170,160,.12); color:var(--c4); }


/* ═══════════════════════════════════════
   KOD BLOĞU
   ═══════════════════════════════════════ */
.cw { background:#0b0f1a; border:1px solid rgba(255,255,255,.09); border-radius:14px; overflow:hidden; margin:13px 0; }
.ct { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07); }
.ds { display:flex; gap:5px; }
.dd { width:10px; height:10px; border-radius:50%; }
.lt { font-family:'JetBrains Mono',monospace; font-size:.6rem; color:rgba(255,255,255,.28); letter-spacing:.12em; text-transform:uppercase; }
.cb { padding:18px 20px; font-family:'JetBrains Mono',monospace; font-size:.77rem; line-height:1.85; color:#cdd6f4; overflow-x:auto; }
.kw{color:#cba6f7;} .fn2{color:#89b4fa;} .sv{color:#a6e3a1;} .cm{color:#585b70;font-style:italic;} .nm{color:#fab387;} .op{color:#89dceb;} .cl{color:#f38ba8;}
code { background:var(--bg4); padding:2px 6px; border-radius:4px; font-size:.72rem; font-family:'JetBrains Mono',monospace; }
[data-theme="krem"] .cw,[data-theme="cream"] .cw { background:#1c1714; border-color:rgba(0,0,0,.15); }
[data-theme="krem"] .cb,[data-theme="cream"] .cb { color:#e8dfd0; }
[data-theme="krem"] code,[data-theme="cream"] code { background:rgba(0,0,0,.09); color:#0d0b07; }


/* ═══════════════════════════════════════
   İPUÇLARI
   ═══════════════════════════════════════ */
.tips { display:flex; flex-direction:column; gap:10px; }
.tip { display:flex; align-items:flex-start; gap:12px; background:var(--bg4); border:1px solid var(--border); border-radius:12px; padding:13px 15px; font-size:.78rem; color:var(--text2); line-height:1.65; transition:border-color .2s; }
.tip:hover { border-color:var(--primary); }
.tip-i { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.tip strong { color:var(--text1); display:block; font-size:.8rem; margin-bottom:3px; }


/* ═══════════════════════════════════════
   SIDEBAR BİLEŞENLERİ
   ═══════════════════════════════════════ */
.sb { background:var(--bg3); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:background .4s,border-color .4s; }
.sbhd { padding:13px 16px; border-bottom:1px solid var(--border); font-family:'Montserrat',sans-serif; font-weight:700; font-size:.77rem; color:var(--text1); display:flex; align-items:center; gap:8px; }
.sbbd { padding:13px 16px; display:flex; flex-direction:column; gap:9px; }
.lrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; font-size:.75rem; color:var(--text2); background:var(--bg4); border:1px solid var(--border); }
.lv { font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--text3); margin-left:auto; }

/* Sidebar pipeline (konu listesi) */
.pipe-item { display:flex; position:relative; padding-bottom:0; }
.pipe-dot { width:14px; height:14px; border-radius:50%; background:var(--pc,var(--primary)); flex-shrink:0; margin-top:14px; margin-right:0; position:relative; box-shadow:0 0 0 3px rgba(0,0,0,.3),0 0 8px var(--pc,var(--primary)); }
.pipe-active .pipe-dot { box-shadow:0 0 0 3px rgba(0,0,0,.25),0 0 14px var(--pc,var(--primary)),0 0 28px var(--pc,var(--primary)); }
.pipe-pulse { position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--pc,var(--primary)); animation:pipePulse 1.8s ease-out infinite; opacity:0; }
@keyframes pipePulse { 0%{transform:scale(.6);opacity:.9;} 100%{transform:scale(2.2);opacity:0;} }
.pipe-line { position:absolute; left:6px; top:28px; bottom:-4px; width:2px; background:linear-gradient(to bottom,var(--pc,var(--primary)),rgba(255,255,255,.04)); z-index:1; }
.pipe-content { display:flex; align-items:center; gap:10px; padding:6px 8px 10px 10px; flex:1; border-radius:10px; transition:background .2s; }
.pipe-item.pipe-active .pipe-content { background:rgba(255,255,255,.04); }
.pipe-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; border:1px solid; }
.pipe-text { flex:1; min-width:0; }
.pipe-name { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.74rem; color:var(--text2); line-height:1.3; }
.pipe-active .pipe-name { color:var(--pc,var(--primary)); }
.pipe-num { font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--text3); letter-spacing:.1em; margin-top:2px; }

/* Sözlük */
.gls-item { padding:8px 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:3px; }
.gls-item:last-child { border-bottom:none; }
.gls-term { font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700; color:var(--c7); }
.gls-def { font-size:.7rem; color:var(--text2); line-height:1.5; }

/* Materyal listesi */
.mat-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:11px; background:var(--bg4); border:1px solid var(--border); margin-bottom:7px; }
.mat-item:last-child { margin-bottom:0; }
.mat-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.9rem; background:rgba(255,255,255,.04); flex-shrink:0; }
.mat-info { flex:1; min-width:0; }
.mat-name { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.73rem; color:var(--text1); }
.mat-desc { font-size:.63rem; color:var(--text3); margin-top:1px; }
.mat-badge { font-size:.58rem; font-weight:700; padding:2px 7px; border-radius:5px; flex-shrink:0; white-space:nowrap; }


/* ═══════════════════════════════════════
   STEP NAV (Önceki / Sonraki konu)
   ═══════════════════════════════════════ */
.step-nav { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:32px 0 0; padding:20px 24px; background:var(--bg3); border:1px solid var(--border); border-radius:16px; flex-wrap:wrap; }
.step-nav-btn { display:flex; align-items:center; gap:10px; text-decoration:none; padding:10px 16px; border-radius:10px; border:1px solid var(--border2); background:var(--bg4); transition:all .2s; min-width:160px; }
.step-nav-btn:hover { border-color:var(--primary); background:rgba(var(--primary-rgb),.07); transform:translateY(-2px); }
.step-nav-btn.next { flex-direction:row-reverse; margin-left:auto; }
.step-nav-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; background:rgba(var(--primary-rgb),.12); color:var(--primary); }
.step-nav-text { flex:1; }
.step-nav-label { font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:2px; }
.step-nav-name { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.8rem; color:var(--text1); }
.step-nav-step { font-size:.65rem; color:var(--text3); margin-top:1px; }


/* ═══════════════════════════════════════
   TEMA FAB (alt sayfa versiyonu — kısa isimler)
   ═══════════════════════════════════════ */
.tfab { position:fixed; bottom:24px; right:24px; z-index:999; }
.tbtn { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); border:none; cursor:pointer; color:#fff; font-size:1.1rem; box-shadow:0 4px 20px rgba(0,0,0,.4); transition:transform .2s; }
.tbtn:hover { transform:scale(1.1); }
.tray { display:none; position:absolute; bottom:58px; right:0; background:var(--bg3); border:1px solid var(--border2); border-radius:14px; padding:12px; width:215px; box-shadow:0 8px 32px rgba(0,0,0,.5); transition:background .4s; }
.tray.open { display:block; }
.tlbl { font-size:.66rem; color:var(--text3); padding:4px 8px 10px; font-weight:600; letter-spacing:.1em; }
.topt { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; transition:background .2s; }
.topt:hover { background:var(--nav-hover,rgba(255,255,255,.06)); }
.topt.act { background:rgba(var(--primary-rgb),.12); outline:1px solid var(--border2); }
.tsws { display:flex; gap:3px; flex-shrink:0; }
.tsw2 { width:13px; height:13px; border-radius:50%; border:1px solid rgba(255,255,255,.18); }
.tnm { font-size:.74rem; font-weight:700; color:var(--text1); }
.tsubb { font-size:.62rem; color:var(--text3); }


/* ═══════════════════════════════════════
   RESPONSIVE — ALT SAYFALAR
   ═══════════════════════════════════════ */
@media(max-width:768px) {
  .h-in,.header-inner { padding:0 14px; }
  .hnav,.header-nav { display:none; }
  .hright .search-bar { display:none; }
  .hero-right { display:none; }
  .hero-left { padding:16px; }
  .mod-ilerleme { flex-wrap:wrap; align-items:stretch; }
  .mod-il-track { min-width:120px; }
  .next-topic-info { order:10; width:100%; max-width:none; min-width:100%; margin-left:0; }
  .nti-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
  .page-title { padding:18px 16px 14px; }
  .pt-h1 { font-size:1.3rem; }
  .pt-desc { font-size:.78rem; }
  .layout { padding:14px 12px 70px; flex-direction:column; }
  .sc { width:100% !important; }
  .cg { grid-template-columns:1fr 1fr !important; }
  .mod-desc { display:none; }
  .mod-title { font-size:.58rem; }
  .mod-subnav-inner { padding:0 16px; gap:4px; }
  .mod-subnav-inner .subnav-link { padding:4px 10px; font-size:.7rem; }
}
@media(max-width:480px) {
  .pt-h1 { font-size:1.05rem; }
  .cg { grid-template-columns:1fr !important; }
}

/* Geniş ekran */
@media(min-width:1600px) {
  .mod-hero-h1 { font-size:clamp(2.2rem,3.5vw,4rem); }
  .mod-hero-desc { font-size:clamp(.9rem,1.3vw,1.1rem); }
  .mod-circle { width:96px; height:96px; }
  .mod-arc { height:108px; }
  .mod-visual { height:128px; }
  .mod-title { font-size:.72rem; }
  .mod-desc { font-size:.64rem; }
  .mod-letter { width:36px; height:36px; font-size:.9rem; }
  .mod-canvas-wrap { width:min(34vw,500px); }
  .hero-left { padding:28px 4vw 18px 6vw; }
}