/* Körfez — Ege YDY Hub prototip
   Tasarım token'ları: docs/arastirma/UI-UX-ARASTIRMA.md */
:root{
  --sea-600:#0B6A8A; --sea-700:#085570; --sea-500:#2A8FA8; --sea-100:#E3F1F5; --sea-50:#F0F7F9;
  --sun-400:#F4A23B; --sun-100:#FDEBD0; --sun-700:#9A5A00;
  --olive-600:#556B2F; --olive-100:#E4EBD5;
  --coral-600:#B8452E; --coral-100:#F8E1DA;
  --ink-900:#14232E; --ink-700:#33444F; --ink-500:#5B6B78; --ink-300:#A9B5BE; --ink-200:#D9DFE3; --ink-100:#ECEFF1;
  --sand-50:#FAF7F2; --sand-100:#F3EEE5; --surface:#FFFFFF;
  --shadow-1:0 1px 2px rgb(20 35 46/.06),0 1px 1px rgb(20 35 46/.04);
  --shadow-2:0 4px 12px -2px rgb(11 106 138/.10),0 2px 4px rgb(20 35 46/.05);
  --shadow-3:0 16px 40px -8px rgb(11 106 138/.18),0 4px 10px rgb(20 35 46/.06);
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --bg:var(--sand-50); --fg:var(--ink-900); --muted:var(--ink-500); --line:var(--ink-200); --card:var(--surface);
}
.dark{
  --bg:#0D1820; --card:#14222C; --fg:#E8EEF2; --muted:#9FB0BC; --line:#25384A;
  --sea-100:#163746; --sea-50:#112631; --sand-100:#1B2C38; --ink-100:#1B2C38; --ink-200:#25384A;
  --olive-100:#25321A; --sun-100:#3A2A12; --coral-100:#3B1F18;
}
.dark .btn.primary{background:#5EC4E0;color:#0D1820}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--body);background:var(--bg);color:var(--fg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
svg.lucide{width:22px;height:22px;stroke-width:1.75;flex:none}
.i16 svg.lucide, svg.lucide.i16{width:16px;height:16px}
.i18 svg.lucide, svg.lucide.i18{width:18px;height:18px}

/* ---------- Kabuk ---------- */
#app{min-height:100dvh}
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100dvh}
.side{display:none}
.main{min-width:0;padding-bottom:96px}
.rail{display:none}
.topbar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);padding:14px 20px 10px;display:flex;align-items:center;gap:12px}
.topbar h1{font-family:var(--display);font-size:26px;line-height:32px;letter-spacing:-.015em;font-weight:700;flex:1}
.topbar .sub{font-size:13px;color:var(--muted);font-weight:500}
.iconbtn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;color:var(--fg);position:relative}
.iconbtn:hover{background:var(--ink-100)}
.iconbtn .dot{position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:9px;background:var(--sun-400);border:2px solid var(--bg)}
.pad{padding:0 20px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;height:72px;padding:6px 8px 10px;display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px);border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted);position:relative}
.tabbar a.on{color:var(--sea-600)}
.tabbar a.on::before{content:"";position:absolute;top:-6px;width:28px;height:3px;border-radius:3px;background:var(--sea-600)}
.tabbar a .badge{position:absolute;top:4px;left:calc(50% + 6px)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sun-400);color:var(--ink-900);font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(160deg,var(--sea-600) 0%,var(--sea-500) 60%,var(--sun-400) 140%);position:relative;overflow:hidden;flex:none}
.logo::before{content:"";position:absolute;left:50%;top:58%;width:16px;height:16px;border-radius:50%;background:var(--sun-400);transform:translate(-50%,-50%)}
.logo::after{content:"";position:absolute;left:-4px;right:-4px;top:62%;height:14px;background:var(--sea-700);border-radius:40% 40% 0 0}

@media (min-width:1024px){
  .shell{grid-template-columns:248px minmax(0,1fr) 340px}
  .shell.wide{grid-template-columns:248px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:6px;padding:22px 16px;border-right:1px solid var(--line);position:sticky;top:0;height:100dvh}
  .side .brand{padding:4px 10px 18px}
  .side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-weight:600;color:var(--ink-700)}
  .dark .side nav a{color:var(--muted)}
  .side nav a.on{background:var(--sea-100);color:var(--sea-600)}
  .side nav a .badge{margin-left:auto}
  .side .me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-1)}
  .side .new{margin:14px 0 8px}
  .main{padding-bottom:40px}
  .tabbar{display:none}
  .rail{display:block;border-left:1px solid var(--line);padding:22px 20px;position:sticky;top:0;height:100dvh;overflow:auto}
  .topbar{padding:22px 32px 14px}
  .pad{padding:0 32px}
  .mobile-only{display:none!important}
}
@media (max-width:1023px){.desk-only{display:none!important}}

/* ---------- Ortak öğeler ---------- */
.h2{font-family:var(--display);font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em}
.sec{margin-top:28px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sec-h a{font-size:14px;font-weight:600;color:var(--sea-600)}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:20px}
.cap{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em}
.card{background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-1),inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
.btn{height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn.primary{background:var(--sea-600);color:#fff}
.btn.accent{background:var(--sun-400);color:var(--ink-900)}
.btn.soft{background:var(--sea-100);color:var(--sea-600)}
.btn.ghost{color:var(--sea-600)}
.btn.line{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--fg)}
.btn.block{width:100%}
.btn.done{background:var(--olive-600);color:#fff}
.chip{height:36px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);white-space:nowrap}
.chip.on{background:var(--sea-100);color:var(--sea-600);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sea-600) 35%,transparent)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.lvl{height:22px;padding:0 8px;border-radius:var(--r-xs);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px;letter-spacing:.02em;color:var(--ink-900)}
.lvl::before{content:"";width:6px;height:6px;border-radius:6px;background:currentColor;opacity:.9}
.lvl.delta{background:#E3F1F5}.lvl.delta::before{background:#0B6A8A}
.lvl.gamma{background:#DCE8C8}.lvl.gamma::before{background:#556B2F}
.lvl.beta{background:#FDE7C4}.lvl.beta::before{background:#C77A12}
.lvl.alpha{background:#F9D5CB}.lvl.alpha::before{background:#B8452E}
.dark .lvl{filter:saturate(.9) brightness(.92)}
.tag{height:22px;padding:0 8px;border-radius:var(--r-xs);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.tag.speak{background:var(--olive-100);color:var(--olive-600)}
.tag.social{background:var(--sun-100);color:var(--sun-700)}
.tag.new{background:var(--sea-100);color:var(--sea-600)}
.dark .tag.speak{color:#9DB46A}.dark .tag.social{color:var(--sun-400)}.dark .tag.new{color:#5EC4E0}
.hoca{height:20px;padding:0 7px;border-radius:var(--r-xs);background:var(--olive-600);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px;letter-spacing:.02em}
.hoca svg.lucide{width:12px;height:12px;stroke-width:2.2}
.av{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none;position:relative;letter-spacing:.01em}
.av.s32{width:32px;height:32px;font-size:12px}.av.s28{width:28px;height:28px;font-size:11px}
.av.s56{width:56px;height:56px;font-size:19px}.av.s96{width:96px;height:96px;font-size:32px}
.av .cap-badge{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:9px;background:var(--olive-600);border:2px solid var(--card);display:grid;place-items:center}
.av .cap-badge svg.lucide{width:10px;height:10px;color:#fff;stroke-width:2.5}
.av.s96 .cap-badge{width:30px;height:30px;border-radius:15px;border-width:3px}.av.s96 .cap-badge svg.lucide{width:16px;height:16px}
.stack{display:flex}.stack .av{box-shadow:0 0 0 2.5px var(--card)}.stack .av+.av{margin-left:-9px}
.stack .more{width:28px;height:28px;border-radius:14px;background:var(--ink-100);color:var(--muted);font-size:11px;font-weight:700;display:grid;place-items:center;margin-left:-9px;box-shadow:0 0 0 2.5px var(--card)}
.c1{background:#0B6A8A}.c2{background:#C77A12}.c3{background:#556B2F}.c4{background:#B8452E}.c5{background:#6B4FBB}.c6{background:#2A8FA8}.c7{background:#8A5A44}.c8{background:#33444F}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.divider{height:1px;background:var(--line);margin:0 20px}

/* ---------- Event kartı (takvim yaprağı) ---------- */
.ev{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:16px;align-items:start}
.leaf{width:62px;border-radius:14px;overflow:hidden;text-align:center;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.leaf .mo{background:var(--sea-600);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 0}
.leaf.soc .mo{background:var(--sun-400);color:var(--ink-900)}
.leaf .d{font-family:var(--display);font-weight:800;font-size:26px;line-height:30px;padding-top:4px}
.leaf .w{font-size:11px;font-weight:600;color:var(--muted);padding-bottom:6px}
.ev h3{font-family:var(--display);font-size:18px;line-height:23px;font-weight:700;letter-spacing:-.01em;margin:6px 0 6px}
.ev .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--muted);font-weight:500}
.ev .meta span{display:inline-flex;align-items:center;gap:5px}
.ev .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px}
.seats{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.seats b{color:var(--fg)}
.list{display:flex;flex-direction:column;gap:12px}

/* ---------- Bugün ---------- */
.hello{font-family:var(--display);font-size:30px;line-height:34px;font-weight:800;letter-spacing:-.025em}
.hello em{font-style:normal;color:var(--sea-600)}
.dark .hello em{color:#5EC4E0}
.next{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:20px;color:#fff;background:linear-gradient(140deg,#0B6A8A 0%,#2A8FA8 62%,#E79A3E 135%);box-shadow:var(--shadow-3)}
.next .k{font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.85}
.next h3{font-family:var(--display);font-size:24px;line-height:28px;font-weight:800;letter-spacing:-.02em;margin:8px 0 10px;max-width:85%}
.next .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;font-weight:600;opacity:.95}
.next .meta span{display:inline-flex;gap:6px;align-items:center}
.next .acts{display:flex;gap:10px;margin-top:16px}
.next .btn.w{background:#fff;color:var(--sea-700)}
.next .btn.t{background:rgb(255 255 255/.16);color:#fff}
.next .sunwave{position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 60%,rgb(244 162 59/.55),transparent 62%)}
.roadmap{display:flex;gap:10px}
.step{flex:1;padding:14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600}
.step .n{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;background:var(--ink-100);font-size:12px;font-weight:800}
.step.ok .n{background:var(--olive-600);color:#fff}
.step.cur{box-shadow:inset 0 0 0 2px var(--sea-600),var(--shadow-2)}
.step.cur .n{background:var(--sea-600);color:#fff}
.note{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--sun-100);font-size:14px;line-height:20px}
.note svg.lucide{color:var(--sun-700)}
.dark .note svg.lucide{color:var(--sun-400)}
.grp{display:flex;align-items:center;gap:12px;padding:12px 16px}
.gico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none}
.gico svg.lucide{width:24px;height:24px}
.g-film{background:#FCE4D6;color:#B8452E}.g-muz{background:#E4DDF7;color:#6B4FBB}.g-fut{background:#DCE8C8;color:#556B2F}.g-oyun{background:#E3F1F5;color:#0B6A8A}.g-doga{background:#E6EFDD;color:#3F6B3A}.g-kit{background:#F3EAD9;color:#8A5A44}.g-yem{background:#FDE7C4;color:#9A5A00}
.dark .gico{filter:saturate(.85) brightness(.75)}
.dark .gico svg{filter:brightness(1.8)}
.gname{font-weight:700;font-size:16px}
.gprev{font-size:14px;color:var(--muted)}
.time{font-size:12px;color:var(--muted);font-weight:600}

/* ---------- Event detay ---------- */
.hero{position:relative;padding:20px 20px 24px;color:#fff;background:linear-gradient(140deg,#0B6A8A 0%,#2A8FA8 62%,#E79A3E 135%);overflow:hidden}
.hero.soc{background:linear-gradient(140deg,#C9761C 0%,#F4A23B 70%,#F7C77E 120%);color:var(--ink-900)}
.hero .bar{display:flex;justify-content:space-between;margin:-6px -10px 10px}
.hero .bar .iconbtn{color:inherit;background:rgb(255 255 255/.16)}
.hero h1{font-family:var(--display);font-size:30px;line-height:34px;font-weight:800;letter-spacing:-.025em;margin:10px 0 14px}
.hero .meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero .meta div{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600}
.hero .tag{background:rgb(255 255 255/.18);color:inherit}
.hero .lvl{box-shadow:0 0 0 1.5px rgb(255 255 255/.5)}
.doc{display:flex;gap:12px;align-items:center;padding:12px 14px}
.doc .fi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--sea-100);color:var(--sea-600)}
.doc .fi.v{background:var(--coral-100);color:var(--coral-600)}
.doc .fi.p{background:var(--olive-100);color:var(--olive-600)}
.qlist{counter-reset:q;display:flex;flex-direction:column;gap:10px}
.qlist li{list-style:none;display:flex;gap:12px;font-size:15px;line-height:22px}
.qlist li::before{counter-increment:q;content:counter(q);flex:none;width:26px;height:26px;border-radius:8px;background:var(--sea-100);color:var(--sea-600);font-weight:800;font-size:13px;display:grid;place-items:center}
.words{display:flex;flex-wrap:wrap;gap:8px}
.word{padding:8px 12px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px}
.word b{font-weight:700}
.people .p{display:flex;align-items:center;gap:12px;padding:10px 0}
.sticky-cta{position:sticky;bottom:72px;padding:12px 20px 14px;background:linear-gradient(to top,var(--bg) 70%,transparent);display:flex;gap:10px;align-items:center}
@media(min-width:1024px){.sticky-cta{bottom:0;padding:16px 32px}}
.close-info{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);font-weight:500}

/* ---------- Form ---------- */
.field{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.field label{font-size:14px;font-weight:700}
.input{height:52px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);padding:0 16px;display:flex;align-items:center;gap:10px;font-size:16px}
.input.focus{box-shadow:inset 0 0 0 2px var(--sea-600),0 0 0 4px color-mix(in srgb,var(--sea-600) 15%,transparent)}
.input .ph{color:var(--ink-300)}
.input.area{height:auto;min-height:92px;align-items:flex-start;padding:14px 16px;line-height:22px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--ink-100);gap:4px}
.seg button{height:44px;border-radius:11px;font-weight:700;font-size:15px;display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--fg);box-shadow:var(--shadow-1)}
.pick{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-md);background:var(--sea-50);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sea-600) 30%,transparent)}
.steps{display:flex;gap:6px;margin:4px 0 0}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--ink-200)}
.steps i.on{background:var(--sea-600)}
.togg{width:46px;height:28px;border-radius:14px;background:var(--ink-200);position:relative;flex:none}
.togg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:11px;background:#fff;box-shadow:var(--shadow-1)}
.togg.on{background:var(--sea-600)}.togg.on::after{left:21px}
.set{display:flex;gap:14px;align-items:center;padding:14px 16px}
.set + .set{border-top:1px solid var(--line)}

/* ---------- Sohbet ---------- */
.chatwrap{display:flex;flex-direction:column;height:100dvh}
.chathead{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
.chathead .t{font-weight:700;font-size:16.5px}
.chathead .s{font-size:12.5px;color:var(--muted);font-weight:500}
.evband{display:flex;align-items:center;gap:10px;margin:10px 12px 0;padding:10px 12px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-1);font-size:13.5px}
.evband .leaf{width:44px}.evband .leaf .d{font-size:18px;line-height:20px;padding-top:2px}.evband .leaf .mo{font-size:9px;padding:2px 0}.evband .leaf .w{display:none}
.msgs{flex:1;overflow:auto;padding:14px 12px 10px;display:flex;flex-direction:column;gap:2px;background:
  radial-gradient(1200px 400px at 100% -10%,color-mix(in srgb,var(--sea-100) 55%,transparent),transparent 60%),var(--bg)}
.day{align-self:center;margin:10px 0;padding:4px 12px;border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);font-size:12px;font-weight:700;color:var(--muted)}
.sys{align-self:center;max-width:86%;text-align:center;margin:8px 0;padding:8px 14px;border-radius:14px;background:var(--sun-100);font-size:13px;line-height:18px;color:var(--ink-700)}
.dark .sys{color:var(--fg)}
.m{display:flex;gap:8px;align-items:flex-end;max-width:84%}
.m.me{align-self:flex-end;flex-direction:row-reverse}
.m .av{visibility:hidden}
.m.first .av{visibility:visible}
.m + .m.first{margin-top:10px}
.b{padding:9px 13px;border-radius:20px;background:var(--card);box-shadow:var(--shadow-1);font-size:15.5px;line-height:21px;position:relative}
.m:not(.me) .b{border-bottom-left-radius:6px}
.m.me .b{background:var(--sea-600);color:#fff;border-bottom-right-radius:6px}
.dark .m.me .b{background:#1F7C9C}
.b .who{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;margin-bottom:2px;color:var(--sea-600)}
.dark .b .who{color:#5EC4E0}
.m.teach .b{box-shadow:var(--shadow-1),inset 3px 0 0 var(--olive-600)}
.m.teach .b .who{color:var(--olive-600)}
.b .ts{font-size:11px;color:var(--muted);font-weight:600;margin-left:8px;float:right;margin-top:6px}
.m.me .b .ts{color:rgb(255 255 255/.75)}
.b .quote{border-left:3px solid var(--sea-500);background:var(--sea-50);border-radius:8px;padding:5px 9px;margin:2px 0 6px;font-size:13px;line-height:18px}
.m.me .b .quote{background:rgb(255 255 255/.14);border-color:#fff}
.b .quote b{display:block;font-size:12px}
.gifb{padding:4px;border-radius:20px;background:var(--card);box-shadow:var(--shadow-1);position:relative}
.gifb img{display:block;width:210px;height:158px;object-fit:cover;border-radius:16px}
.gifb .src{position:absolute;left:12px;bottom:12px;font-size:10px;font-weight:700;color:#fff;background:rgb(0 0 0/.45);padding:2px 6px;border-radius:6px;letter-spacing:.03em}
.gifb .cap2{position:absolute;right:12px;bottom:12px;font-size:12px;font-weight:700;color:var(--ink-900);background:#fff;padding:3px 8px;border-radius:8px}
.stk{width:132px;height:132px}
.reacts{display:flex;gap:4px;margin:-6px 0 4px 46px;position:relative;z-index:1}
.m.me + .reacts,.reacts.me{align-self:flex-end;margin:-6px 6px 4px 0}
.react{height:24px;padding:0 8px;border-radius:12px;background:var(--card);box-shadow:var(--shadow-2);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.react img{width:16px;height:16px}
.typing{align-self:flex-start;margin:8px 0 0 4px;font-size:12.5px;color:var(--muted);font-weight:600;display:flex;gap:8px;align-items:center}
.dots{display:inline-flex;gap:3px}.dots i{width:6px;height:6px;border-radius:3px;background:var(--ink-300)}
.intro{align-self:stretch;margin:10px 0;padding:14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-2)}
.intro .qs{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.intro .qs button{text-align:left;padding:9px 12px;border-radius:12px;background:var(--sea-50);font-size:14px;font-weight:600;color:var(--sea-700)}
.dark .intro .qs button{text-align:left;color:#5EC4E0}
.quick{display:flex;gap:8px;overflow-x:auto;padding:8px 12px 0;scrollbar-width:none}
.quick .chip{height:34px;font-size:13.5px}
.composer{display:flex;align-items:flex-end;gap:6px;padding:8px 10px 12px;border-top:1px solid var(--line);background:var(--bg)}
.composer .box{flex:1;min-height:44px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;padding:0 6px 0 16px;gap:2px;color:var(--ink-300);font-size:16px}
.composer .box .txt{flex:1;color:var(--ink-300)}
.composer .box .txt.has{color:var(--fg)}
.composer .gifbtn{height:30px;padding:0 8px;border-radius:8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);box-shadow:inset 0 0 0 1.6px var(--ink-300)}
.composer .gifbtn.on{background:var(--sea-600);color:#fff;box-shadow:none}
.send{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;background:var(--ink-100);color:var(--muted)}
.send.on{background:var(--sea-600);color:#fff}
.closed{padding:16px;border-top:1px solid var(--line);text-align:center;background:var(--card)}
.closed b{font-family:var(--display);font-size:18px}

/* GIF / çıkartma paneli */
.sheet{background:var(--card);border-radius:24px 24px 0 0;box-shadow:0 -12px 40px -10px rgb(11 106 138/.25);padding:8px 14px 12px;height:400px;display:flex;flex-direction:column}
.grab{width:40px;height:5px;border-radius:3px;background:var(--ink-200);margin:2px auto 10px}
.sheet .tabs{display:flex;gap:6px;margin-bottom:10px}
.sheet .tabs button{height:34px;padding:0 14px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--muted)}
.sheet .tabs button.on{background:var(--sea-100);color:var(--sea-600)}
.search{height:42px;border-radius:12px;background:var(--sand-100);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-size:15px}
.dark .search{background:#0D1820}
.hint{font-size:12.5px;color:var(--muted);margin:6px 2px 8px;display:flex;gap:6px;align-items:center}
.hint b{color:var(--sea-600)}
.moods{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.moods .chip{height:32px;font-size:13px;padding:0 12px}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:hidden;flex:1}
.ggrid img{width:100%;height:96px;object-fit:cover;border-radius:12px;display:block}
.ggrid .sel{outline:3px solid var(--sea-600);outline-offset:-3px;border-radius:12px}
.powered{font-size:10.5px;color:var(--muted);text-align:right;margin-top:6px;font-weight:700;letter-spacing:.04em}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1}
.sgrid .stk{width:100%;height:auto;aspect-ratio:1}
.react-pop{display:flex;gap:4px;padding:6px 8px;border-radius:999px;background:var(--card);box-shadow:var(--shadow-3);align-self:flex-start;margin:0 0 6px 40px}
.react-pop button{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;font-size:22px}
.react-pop img{width:30px;height:30px}
.react-pop .plus{background:var(--ink-100);color:var(--muted)}
.menu{align-self:flex-start;margin:6px 0 6px 40px;width:230px;padding:6px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-3)}
.menu div{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600}
.menu div.red{color:var(--coral-600)}
.scrim{position:absolute;inset:0;background:rgb(20 35 46/.18);backdrop-filter:blur(1.5px);z-index:0}

/* masaüstü sohbet düzeni */
.chatgrid{display:grid;grid-template-columns:minmax(0,1fr);height:100dvh}
.chatwrap{min-width:0}
.chatlist{display:none}
@media(min-width:1024px){
  .chatgrid{grid-template-columns:340px minmax(0,1fr)}
  .chatlist{display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:auto}
  .chatlist .grp.on{background:var(--sea-100)}
  .msgs{padding:18px 28px}
  .m{max-width:min(84%,620px)}
  .composer{padding:10px 24px 16px}
  .sheet{max-width:520px;margin-left:24px;border-radius:24px;margin-bottom:8px}
}
.lst-h{padding:18px 18px 8px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted)}

/* ---------- Giriş / kurulum ---------- */
.auth{min-height:100dvh;display:grid;grid-template-columns:1fr}
.auth .art{display:none}
.auth .form{padding:28px 24px;display:flex;flex-direction:column;min-height:100dvh}
.auth .bigt{font-family:var(--display);font-size:38px;line-height:40px;font-weight:800;letter-spacing:-.03em;margin:22px 0 12px}
.auth .bigt em{font-style:normal;color:var(--sea-600)}
.coast{height:230px;margin:6px -24px 0;position:relative;overflow:hidden;background:linear-gradient(180deg,#FBE3C2 0%,#F7C98A 45%,#F4A23B 70%,#E68A3E 100%)}
.coast .sun{position:absolute;left:58%;top:58px;width:110px;height:110px;border-radius:50%;background:#FFF4DE;box-shadow:0 0 60px 20px rgb(255 240 210/.6)}
.coast .w1,.coast .w2,.coast .w3{position:absolute;left:-10%;right:-10%;border-radius:50% 50% 0 0}
.coast .w1{top:132px;height:140px;background:#2A8FA8}
.coast .w2{top:156px;height:140px;background:#0B6A8A;left:-30%}
.coast .w3{top:186px;height:120px;background:#085570;right:-40%}
.coast .gull{position:absolute;color:#14232E;opacity:.7}
.ssobtn{height:54px;border-radius:16px;display:flex;align-items:center;gap:12px;padding:0 16px;font-weight:700;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.ege{width:30px;height:30px;border-radius:8px;background:#0B3D6B;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}
@media(min-width:1024px){
  .auth{grid-template-columns:1.1fr 1fr}
  .auth .art{display:flex;position:relative;overflow:hidden;background:linear-gradient(180deg,#FBE3C2 0%,#F7C98A 40%,#F4A23B 62%,#E68A3E 100%);padding:48px;flex-direction:column;justify-content:space-between}
  .auth .art .coast{position:absolute;inset:auto 0 0 0;height:100%;margin:0;background:none}
  .auth .art .coast .sun{top:30%;left:52%;width:200px;height:200px}
  .auth .art .coast .w1{top:56%;height:60%}.auth .art .coast .w2{top:64%;height:60%}.auth .art .coast .w3{top:74%;height:50%}
  .auth .form{max-width:520px;padding:64px 56px;justify-content:center}
  .auth .form .coast{display:none}
  .auth .art .quote{position:relative;z-index:2;color:#fff;font-family:var(--display);font-size:30px;line-height:36px;font-weight:700;max-width:440px;letter-spacing:-.015em}
}
.otp{display:flex;gap:8px}
.otp span{flex:1;height:58px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;font-family:var(--display);font-size:26px;font-weight:700}
.otp span.f{box-shadow:inset 0 0 0 2px var(--sea-600)}
.lvlpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lvlpick div{padding:14px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:6px}
.lvlpick div.on{box-shadow:inset 0 0 0 2px var(--sea-600);background:var(--sea-50)}
.lvlpick b{font-family:var(--display);font-size:18px}
.intgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.int{display:flex;gap:10px;align-items:center;padding:10px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:15px}
.int .gico{width:40px;height:40px;border-radius:12px}
.int.on{box-shadow:inset 0 0 0 2px var(--sea-600);background:var(--sea-50)}
.int .ck{margin-left:auto;width:22px;height:22px;border-radius:11px;box-shadow:inset 0 0 0 1.5px var(--ink-300);display:grid;place-items:center}
.int.on .ck{background:var(--sea-600);box-shadow:none;color:#fff}
.int .ck svg.lucide{width:14px;height:14px;stroke-width:3}
.spacer{flex:1}

/* ---------- Profil ---------- */
.cover{height:120px;background:linear-gradient(140deg,#0B6A8A 0%,#2A8FA8 62%,#E79A3E 135%);position:relative}
.cover.t{background:linear-gradient(140deg,#3E5122 0%,#556B2F 60%,#C9A44B 130%)}
.prof{padding:0 20px;margin-top:-48px;position:relative}
.prof .av{box-shadow:0 0 0 4px var(--bg)}
.prof h2{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:10px;display:flex;gap:10px;align-items:center}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kv>*{padding:14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-1)}
.kv b{font-family:var(--display);font-size:16px;display:block}
.past{display:flex;gap:12px;align-items:center;padding:12px 16px}
.past + .past{border-top:1px solid var(--line)}

/* ---------- Yönetim ---------- */
.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{padding:18px}
.stat .v{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:800;padding:12px 16px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.pill{height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:700;display:inline-flex;align-items:center}
.pill.w{background:var(--sun-100);color:var(--sun-700)}.pill.ok{background:var(--olive-100);color:var(--olive-600)}.pill.r{background:var(--coral-100);color:var(--coral-600)}

/* ---------- Rail ---------- */
.rail .h2{font-size:17px;margin-bottom:12px}
.mini{display:flex;gap:12px;align-items:center;padding:10px 0}
.mini + .mini{border-top:1px solid var(--line)}
.mini .leaf{width:46px}.mini .leaf .d{font-size:18px;line-height:20px}.mini .leaf .mo{font-size:9px;padding:2px 0}.mini .leaf .w{display:none}
.mini b{font-size:14px;display:block;line-height:19px}

/* İsim ve logo henüz belli değil: yer tutucu */
.ph-logo{width:34px;height:34px;border-radius:10px;border:2px dashed var(--ink-300);display:grid;place-items:center;font-family:var(--body);font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--muted);flex:none}
.ph-name{font-family:var(--body);font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0;border-bottom:2px dashed var(--ink-300);padding-bottom:1px}
.art .ph-logo{border-color:rgb(20 35 46/.45);color:rgb(20 35 46/.7)}.art .ph-name{color:rgb(20 35 46/.75);border-color:rgb(20 35 46/.45)}

/* ---------- Interactive demo additions ---------- */
input.bare{border:0;outline:0;background:transparent;font:inherit;color:var(--fg);flex:1;min-width:0;font-size:16px;padding:0}
input.bare::placeholder{color:var(--ink-300)}
.input:focus-within{box-shadow:inset 0 0 0 2px var(--sea-600),0 0 0 4px color-mix(in srgb,var(--sea-600) 15%,transparent)}
.composer .box{color:var(--fg)}
.composer .box:focus-within{box-shadow:inset 0 0 0 2px var(--sea-600)}
.iconbtn.on2{color:var(--sea-600)}
[data-go],[data-act]{cursor:pointer}
.card.ev{transition:transform .12s,box-shadow .2s}
.card.ev:hover{box-shadow:var(--shadow-2),inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
.card.ev:active,.btn:active,.chip:active{transform:scale(.98)}
.btn:hover{filter:brightness(1.05)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--sea-500)}
.sgrid button,.ggrid button{padding:0;border-radius:12px;overflow:hidden;transition:transform .12s}
.sgrid button:hover,.ggrid button:hover{transform:scale(1.04)}
.ggrid{grid-auto-rows:96px}
.ggrid button img{width:100%;height:96px;object-fit:cover;display:block}
.react.mine{background:var(--sea-100);color:var(--sea-600);box-shadow:inset 0 0 0 1.5px var(--sea-500)}
.react-pop button{width:40px;height:40px;border-radius:20px;display:grid;place-items:center}
.react-pop button:hover{background:var(--ink-100)}
.react-pop button img{width:28px;height:28px}
.msgmenu{display:flex;flex-direction:column;gap:6px;margin:6px 0 8px 40px;align-self:flex-start;position:relative;z-index:2}
.msgmenu.me{align-self:flex-end;margin:6px 6px 8px 0;align-items:flex-end}
.msgmenu .react-pop,.msgmenu .menu{margin:0}
.menu button{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;width:100%;text-align:left}
.menu button:hover{background:var(--ink-100)}
.menu button.red{color:var(--coral-600)}
.sys.rules{background:var(--card);box-shadow:var(--shadow-1);text-align:left;max-width:100%;align-self:stretch}
.replybar{display:flex;gap:10px;align-items:center;padding:8px 12px 0 16px;border-top:1px solid var(--line);background:var(--bg)}
.replybar>svg{color:var(--sea-600)}
.overlay{position:fixed;inset:0;z-index:30;background:rgb(20 35 46/.35);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheetcard{width:100%;max-width:520px;border-radius:28px 28px 0 0;padding:10px 22px 26px;box-shadow:var(--shadow-3);animation:up .32s cubic-bezier(.2,.8,.2,1)}
@media(min-width:1024px){.overlay{align-items:center}.sheetcard{border-radius:28px}}
.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:60;background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:14px;font-size:14.5px;font-weight:600;box-shadow:var(--shadow-3);max-width:calc(100vw - 32px)}
.dark .toast{background:#E8EEF2;color:#0D1820}
.tblwrap{overflow-x:auto}
/* Tour */
.tour-bar{position:fixed;z-index:50;display:flex;align-items:center;gap:4px;background:#14232E;color:#fff;border-radius:999px;padding:4px;box-shadow:var(--shadow-3)}
.tour-bar .iconbtn{color:#fff;width:40px;height:40px}
.tour-bar .iconbtn:hover{background:rgb(255 255 255/.12)}
.tb-mid{display:flex;align-items:center;gap:10px;color:#fff;min-width:0;padding:0 10px;height:40px;border-radius:20px;font-size:14px}
.tb-mid:hover{background:rgb(255 255 255/.12)}
.tp-n{width:24px;height:24px;border-radius:12px;background:var(--sun-400);color:#14232E;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.tour-panel{position:fixed;z-index:55;background:var(--card);box-shadow:var(--shadow-3);display:flex;flex-direction:column;animation:up .25s}
.tp-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px 20px}
.tp-role{padding:6px 20px 12px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line)}
.tp-list{overflow:auto;flex:1;padding:8px}
.tp-item{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:12px;width:100%}
.tp-item:hover{background:var(--ink-100)}
.tp-item.on{background:var(--sea-100)}
.tp-item b{display:block;font-size:14.5px}
.tp-item span span{display:block;font-size:12.5px;color:var(--muted);line-height:17px;margin-top:2px}
.tp-item .tp-n{background:var(--ink-100);color:var(--fg)}
.tp-item.on .tp-n{background:var(--sea-600);color:#fff}
.tp-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:1023px){
  body.has-tour #app{padding-top:52px}
  body.has-tour .topbar{top:52px}
  body.has-tour .chatwrap,body.has-tour .chatgrid{height:calc(100dvh - 52px)}
  .tour-bar{top:6px;left:8px;right:8px}
  .tb-mid{flex:1}
  .tour-panel{inset:56px 8px 8px 8px;border-radius:20px}
}
@media(min-width:1024px){
  .tour-bar{right:20px;bottom:20px;max-width:420px}
  .tour-panel{right:20px;bottom:76px;width:380px;max-height:calc(100dvh - 100px);border-radius:20px}
}
input.bare{width:1px}
.auth .form,.auth .field,.input{min-width:0}
.input .muted{white-space:nowrap;font-size:14px}
@media(min-width:1024px){body.tour-open #app{margin-right:400px}}