/* ============================================================
   MET AKADEMİ — Tasarım Sistemi
   Kurumsal renkler: Turuncu / Siyah / Beyaz / Yeşil
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --turuncu:#FF6A00; --turuncu-dark:#E25C00; --turuncu-soft:#FFF3EA;
  --siyah:#141414; --ink:#1B1B1B; --beyaz:#FFFFFF; --bg:#F5F6F8;
  --yesil:#15A34A; --yesil-soft:#EAF8F0;
  --line:#E6E8EC; --muted:#6B7280; --muted2:#9AA1AC;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(20,20,20,.05),0 8px 24px rgba(20,20,20,.06);
  --shadow-lg:0 20px 60px rgba(20,20,20,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,.display{font-family:'Plus Jakarta Sans',system-ui,sans-serif;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .small{font-size:12.5px} .tiny{font-size:11px}
code{background:#f1f3f5;padding:1px 5px;border-radius:5px;font-size:.9em}

/* ---- brand ---- */
.brand{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans';font-weight:800;letter-spacing:-.5px}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--siyah);display:grid;place-items:center;position:relative;overflow:hidden;flex:0 0 auto}
.brand .logo:before{content:"";position:absolute;inset:0;background:conic-gradient(from 220deg at 30% 20%,var(--turuncu),transparent 40%)}
.brand .logo span{position:relative;color:#fff;font-size:15px;font-weight:800}
.brand .name{font-size:19px;line-height:1}
.brand .name b{color:var(--turuncu)}
.brand .name small{display:block;font-size:9.5px;letter-spacing:3px;color:var(--muted);font-weight:700;font-family:'Inter'}
.brand.sm{transform:scale(.92);transform-origin:left}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-weight:700;
  border-radius:var(--r-sm);padding:11px 18px;font-size:14px;transition:.15s;white-space:nowrap;line-height:1;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--turuncu);color:#fff;box-shadow:0 6px 16px rgba(255,106,0,.28)}
.btn-primary:hover{background:var(--turuncu-dark)}
.btn-dark{background:var(--siyah);color:#fff}.btn-dark:hover{background:#000}
.btn-green{background:var(--yesil);color:#fff}.btn-green:hover{filter:brightness(.95)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{border-color:#cfd3da;background:#fafbfc}
.btn-soft{background:var(--turuncu-soft);color:var(--turuncu-dark)}
.btn-danger{background:#fff;color:#DC2626;border:1px solid #f3c8c8}.btn-danger:hover{background:#fff5f5}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed}
.btn-icn{padding:9px;border-radius:9px}

/* ---- surfaces ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:20px}.pad-lg{padding:26px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px}
.badge-prem{background:linear-gradient(90deg,#16A34A,#10b36b);color:#fff}
.badge-free{background:#F1F3F5;color:var(--muted)}
.badge-orange{background:var(--turuncu-soft);color:var(--turuncu-dark)}
.badge-game{background:#EEF2FF;color:#4F46E5}
.badge-ex{background:var(--yesil-soft);color:var(--yesil)}
.badge-done{background:var(--yesil);color:#fff}

/* ---- inputs ---- */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:600;color:#374151;margin-bottom:6px}
.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;font-size:14px;font-family:inherit;background:#fff;outline:none;transition:.15s;color:var(--ink)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--turuncu);box-shadow:0 0 0 3px rgba(255,106,0,.12)}
.textarea{resize:vertical;min-height:90px}
.textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;cursor:pointer}
.check input{width:17px;height:17px;accent-color:#FF6A00}

/* ---- alert / flash ---- */
.alert{padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.alert-err{background:#FEF2F2;color:#B91C1C;border:1px solid #F6D5D5}
.alert-ok{background:var(--yesil-soft);color:#0E7A38;border:1px solid #C5EBD3}
.alert-warn{background:#FFFBEB;color:#92400E;border:1px solid #FDE9C4}

/* ---- topbar ---- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.navtabs{display:flex;gap:4px;flex-wrap:wrap}
.navtab{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted);background:transparent;border:none;cursor:pointer;text-decoration:none}
.navtab:hover{background:#f4f5f7;color:var(--ink)}
.navtab.active{background:var(--siyah);color:#fff}
.navtab.active.admin{background:var(--turuncu)}
.userchip{display:flex;align-items:center;gap:10px}
.av{width:34px;height:34px;border-radius:50%;background:var(--turuncu-soft);color:var(--turuncu-dark);display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto}

/* ---- auth ---- */
.auth-bg{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-hero{background:var(--siyah);color:#fff;position:relative;overflow:hidden;padding:54px;display:flex;flex-direction:column;justify-content:space-between}
.auth-hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.35),transparent 60%);top:-160px;right:-140px}
.auth-hero:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(21,163,74,.28),transparent 60%);bottom:-120px;left:-90px}
.auth-hero .inner{position:relative;z-index:2}
.auth-hero h1{font-size:42px;line-height:1.05;font-weight:800;letter-spacing:-1px;margin:26px 0 14px}
.auth-hero h1 em{font-style:normal;color:var(--turuncu)}
.auth-hero p{color:#c7cbd2;font-size:15px;max-width:430px;line-height:1.6}
.hero-stats{position:relative;z-index:2;display:flex;gap:30px;margin-top:30px}
.hero-stats .s b{font-family:'Plus Jakarta Sans';font-size:26px;font-weight:800;display:block}
.hero-stats .s span{color:#9aa1ac;font-size:12px}
.feat-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:8px 13px;border-radius:99px;font-size:12.5px;color:#e7e9ee;margin:4px 6px 0 0}
.eyebrow{display:inline-block;background:rgba(255,106,0,.15);color:#FFB37A;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;border:1px solid rgba(255,106,0,.25)}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-card{width:100%;max-width:430px}
.auth-mobile-brand{display:none;margin-bottom:18px}
.seg{display:flex;background:#eceef1;border-radius:11px;padding:4px;margin-bottom:18px;gap:3px}
.seg button{flex:1;border:none;background:transparent;padding:9px;border-radius:8px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.tabpane{display:none}.tabpane.on{display:block;animation:fade .2s}
.linkbtn{background:none;border:none;color:var(--turuncu);font-weight:700;cursor:pointer;padding:0;font-size:inherit}
.pwwrap{position:relative}
.pwwrap .toggle{position:absolute;right:8px;top:7px;background:#f3f4f6;border:none;border-radius:7px;padding:6px;cursor:pointer;color:#666}

/* ---- exercise card ---- */
.exc{position:relative;overflow:hidden;display:flex;flex-direction:column}
.exc .thumb{height:104px;display:grid;place-items:center;color:#fff;position:relative;background:linear-gradient(135deg,#1f1f1f,#333)}
.exc.locked .thumb{filter:grayscale(.4)}
.exc .lockover{position:absolute;inset:0;background:rgba(20,20,20,.62);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;backdrop-filter:blur(2px)}
.exc .body{padding:15px;flex:1;display:flex;flex-direction:column}
.exc h3{font-size:15px;font-weight:700;margin-bottom:4px}
.exc .desc{font-size:12.5px;color:var(--muted);flex:1;line-height:1.5;margin-bottom:12px}

/* ---- banner ---- */
.banner{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#000;aspect-ratio:1100/300;min-height:150px}
.banner .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.banner .slide.on{opacity:1}
.banner img,.banner video{width:100%;height:100%;object-fit:cover;display:block}
.banner .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.banner .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.banner .dots i.on{background:#fff;width:18px;border-radius:4px}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;background:rgba(15,15,18,.55);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .2s}
.modal{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:92vh;overflow:auto;animation:pop .22s}
.modal.wide{max-width:920px}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.modal-h h2{font-size:17px;font-weight:800}
.xbtn{background:#f3f4f6;border:none;width:32px;height:32px;border-radius:9px;cursor:pointer;display:grid;place-items:center;color:#555}
.xbtn:hover{background:#e9eaed}

/* ---- player ---- */
.player{background:#0f0f10;color:#fff;border-radius:18px;width:100%;max-width:760px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
.player-top{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:#161617;border-bottom:1px solid #262628}
.player-top .t{font-weight:700;font-size:14.5px}
.player-frame{flex:1;background:#0f0f10;min-height:420px}
.player-frame iframe{width:100%;height:62vh;min-height:420px;border:none;display:block;background:#0f0f10}
.player-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:#161617;border-top:1px solid #262628;flex-wrap:wrap}
.timepill{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:#fff;background:#222;padding:8px 14px;border-radius:10px;font-variant-numeric:tabular-nums}
.timepill.ok{background:rgba(21,163,74,.18);color:#4ade80}
.scorepill{font-size:12.5px;color:#cfd2d6}.scorepill b{color:var(--turuncu)}

/* ---- table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:10px 12px;background:#fafbfc;border-bottom:1px solid var(--line);font-weight:700;color:#374151;font-size:12px;white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid #f1f2f4;vertical-align:middle}
.tbl tr:hover td{background:#fcfcfd}
.tbl .num{font-variant-numeric:tabular-nums}
.scrollx{overflow-x:auto}

/* ---- kpi / misc ---- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi .k{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi .k b{font-family:'Plus Jakarta Sans';font-size:26px;font-weight:800;display:block}
.kpi .k span{color:var(--muted);font-size:12.5px}
.codechip{font-family:ui-monospace,monospace;background:#0f0f10;color:#fff;padding:6px 11px;border-radius:8px;font-weight:700;letter-spacing:1px;font-size:13px;display:inline-block}
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .ic{width:56px;height:56px;border-radius:14px;background:#f3f4f6;display:grid;place-items:center;margin:0 auto 12px;color:#9aa1ac}
.soon{display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;color:#6B7280;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px}

/* ---- thank you ---- */
.thanks{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 30px;position:relative}
.thanks .ring{width:96px;height:96px;border-radius:50%;background:var(--yesil-soft);display:grid;place-items:center;animation:popbig .5s cubic-bezier(.2,1.3,.4,1)}
.thanks .ring .chk{width:54px;height:54px;border-radius:50%;background:var(--yesil);display:grid;place-items:center;color:#fff}
.thanks h2{margin:18px 0 8px;font-size:21px;font-weight:800}
.thanks p{color:var(--muted);max-width:360px;line-height:1.6}
.conf{position:absolute;top:0;width:9px;height:14px;border-radius:2px;animation:fall 1.4s ease-in forwards}

/* ---- toast ---- */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--siyah);color:#fff;padding:12px 18px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;animation:slideup .25s}
.toast.warn{background:#B45309}.toast.err{background:#B91C1C}.toast.ok{background:var(--yesil)}

/* ---- fab ---- */
.fab{position:fixed;right:22px;bottom:22px;z-index:40;box-shadow:var(--shadow-lg);border-radius:99px;padding:13px 18px}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
@keyframes popbig{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes slideup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(320px) rotate(360deg);opacity:0}}

@media(max-width:880px){
  .auth-bg{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-mobile-brand{display:block}
  .two,.three{grid-template-columns:1fr}
  .hide-mobile{display:none}

  /* Üst bar: brand + kullanıcı tek satır; nav alt satırda yatay kaydırılabilir */
  .topbar .wrap{height:auto;min-height:60px;flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}
  .userchip{margin-left:auto}
  .main-nav{order:3;flex-basis:100%;width:100%}
  .navtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navtabs::-webkit-scrollbar{display:none}
  .navtab{white-space:nowrap;flex:0 0 auto}

  /* Yönetici nav: dikey alanı yememesi için sabit değil, tek satır kaydırılabilir */
  .adminnav{position:static;top:auto!important}
  .adminnav .wrap{padding:6px 14px}

  /* iOS odak yakınlaşmasını önlemek için form alanları en az 16px */
  .input,.select,.textarea{font-size:16px}

  /* Geri bildirim butonu mobilde biraz daha küçük */
  .fab{right:14px;bottom:14px;padding:11px 15px}

  /* Veri tabloları: sıkışıp ezilmek yerine okunaklı kalıp yatay kaydırılsın */
  .scrollx .table{min-width:560px}
  .scrollx .table th,.scrollx .table td{white-space:nowrap}

  /* Rahat dokunma hedefleri */
  .btn{min-height:44px}
  .btn-sm{min-height:36px}
}

/* ---- Lucide ikon boyutları ---- */
svg.lucide{width:18px;height:18px;vertical-align:-3px;stroke-width:2}
.btn svg.lucide{width:16px;height:16px}
.btn-sm svg.lucide{width:14px;height:14px}
.btn-icn svg.lucide{width:16px;height:16px}
.badge svg.lucide{width:12px;height:12px}
.navtab svg.lucide{width:16px;height:16px}
.fab svg.lucide{width:17px;height:17px}
.empty .ic svg.lucide,.kpi .k svg.lucide{width:22px;height:22px}
.thanks .chk svg.lucide{width:30px;height:30px;stroke-width:3}

/* ---- Site alt kredi / SEO bağlantısı ---- */
.site-credit{text-align:center;padding:18px 12px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:10px}
.site-credit a{color:var(--turuncu);font-weight:700}
.auth-bg + .site-credit{border-top:none;background:var(--bg)}

/* Sınıf bazlı şablon akordeonu (admin/sinavlar) */
.sinif-acc{border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:10px;background:#fff}
.sinif-acc>summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;font-weight:700}
.sinif-acc>summary::-webkit-details-marker{display:none}
.sinif-acc>summary::marker{content:''}
.sinif-acc[open]{box-shadow:var(--shadow)}

/* ---- Şık sıralama (sürükle-bırak) ---- */
.choice-sort{display:flex;flex-direction:column;gap:8px}
.choice-row{display:flex;align-items:center;gap:10px;background:var(--beyaz);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.choice-row.correct{border-color:var(--yesil);background:var(--yesil-soft)}
.choice-row.dragging{opacity:.45}
.choice-row .dh{cursor:grab;color:var(--muted);display:inline-flex;flex:0 0 auto;touch-action:none}
.choice-row .dh:active{cursor:grabbing}
.choice-row .cl{font-weight:800;width:18px;text-align:center;flex:0 0 auto;color:var(--ink)}
.choice-row .ci{flex:1;margin:0}
.choice-row .cmark{flex:0 0 auto;border:1px solid var(--line);background:var(--beyaz);border-radius:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.choice-row .cmark.on{background:var(--yesil);border-color:var(--yesil);color:#fff}
.choice-row .cmark i{width:16px;height:16px}
.choice-row .dh i{width:16px;height:16px}