/* ============================================================
   OnlineKamu - Tema
   ============================================================ */
:root {
    --ok-primary: #1b3b6f;     /* lacivert */
    --ok-primary-dark: #142d54;
    --ok-accent: #f5a623;      /* amber vurgu */
    --ok-light: #f4f6fa;
}

html, body { height: 100%; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #2b2f38;
    background: #fff;
}

a { text-decoration: none; }

/* ----- Renkler / butonlar ----- */
.btn-primary {
    --bs-btn-bg: var(--ok-primary);
    --bs-btn-border-color: var(--ok-primary);
    --bs-btn-hover-bg: var(--ok-primary-dark);
    --bs-btn-hover-border-color: var(--ok-primary-dark);
    --bs-btn-active-bg: var(--ok-primary-dark);
}
.btn-accent {
    background: var(--ok-accent);
    border-color: var(--ok-accent);
    color: #1b1b1b;
    font-weight: 600;
}
.btn-accent:hover { background: #e0951a; color: #1b1b1b; }
.text-primary { color: var(--ok-primary) !important; }
.bg-soft { background: var(--ok-light); }

/* ----- Navbar ----- */
.ok-navbar {
    background: var(--ok-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.ok-navbar .nav-link { font-weight: 500; }

/* ----- Hero ----- */
.ok-hero {
    background: linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    color: #fff;
    padding: 4.5rem 0;
}
.ok-hero .lead { color: rgba(255,255,255,.85); }

/* ----- Slider / Carousel ----- */
.ok-slide {
    min-height: 420px;
}
@media (max-width: 575px) {
    .ok-slide { min-height: 340px; }
    .ok-slide h1 { font-size: 1.6rem; }
}

/* ----- Kartlar ----- */
.ok-card {
    border: 1px solid #e9edf3;
    border-radius: .75rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
/* Eşit yükseklik gereken grid kartları için .h-100 kullanılır.
   Grid (row/col) içindeki kartlar otomatik eşit yükseklik alsın: */
.row > [class*="col"] > .ok-card { height: 100%; }
.ok-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(27,59,111,.12);
}
.ok-icon-circle {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(27,59,111,.1);
    color: var(--ok-primary);
    font-size: 1.5rem;
}

/* ----- Istatistik ----- */
.ok-stat { font-size: 2.2rem; font-weight: 700; color: var(--ok-primary); }

/* ----- Footer ----- */
.ok-footer { background: var(--ok-primary-dark); color: #fff; }
.ok-footer a { color: rgba(255,255,255,.7); }
.ok-footer a:hover { color: #fff; }

/* ----- Sinav arayuzu ----- */
.ok-question-card { border: 1px solid #e9edf3; border-radius: .75rem; }
.ok-option {
    display: block;
    border: 1.5px solid #e2e8f0;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: .6rem;
    cursor: pointer;
    transition: all .12s ease;
}
.ok-option:hover { border-color: var(--ok-primary); background: #f7f9fc; }
.ok-option input { margin-right: .5rem; }
.ok-option.selected { border-color: var(--ok-primary); background: rgba(27,59,111,.06); }
.ok-option.correct { border-color: #198754; background: rgba(25,135,84,.08); }
.ok-option.wrong { border-color: #dc3545; background: rgba(220,53,69,.08); }

.ok-timer {
    font-size: 1.25rem; font-weight: 700;
    background: var(--ok-primary); color: #fff;
    padding: .35rem .9rem; border-radius: .5rem;
}
.ok-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.ok-nav-btn {
    aspect-ratio: 1; border: 1.5px solid #cdd6e4; border-radius: .4rem;
    background: #fff; font-weight: 600; font-size: .85rem;
}
.ok-nav-btn.answered { background: var(--ok-primary); color: #fff; border-color: var(--ok-primary); }
.ok-nav-btn.active { outline: 2px solid var(--ok-accent); }

/* ----- Admin ----- */
/* ----- Dahili ikon seçici ----- */
.ok-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
}
.ok-icon-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; padding: .7rem .4rem;
    border: 1px solid #e6eaf0; border-radius: .55rem; background: #fff;
    cursor: pointer; transition: all .12s; min-height: 78px;
}
.ok-icon-cell:hover { border-color: var(--ok-primary); background: #f4f7fc; transform: translateY(-2px); }
.ok-icon-cell i { font-size: 1.5rem; color: var(--ok-primary); }
.ok-icon-cell span {
    font-size: .65rem; color: #8a93a3; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ok-sidebar {
    background: var(--ok-primary-dark);
    min-height: calc(100vh - 56px);
}
.ok-sidebar a {
    color: rgba(255,255,255,.78);
    display: block; padding: .6rem 1.2rem; font-size: .95rem;
}
.ok-sidebar a:hover, .ok-sidebar a.active {
    background: rgba(255,255,255,.08); color: #fff;
    border-left: 3px solid var(--ok-accent);
}

/* ----- MasterStudy tarzı iç içe admin menü ----- */
.ok-admin-menu { display: flex; flex-direction: column; }
.ok-menu-group {
    color: rgba(255,255,255,.4);
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    padding: 1rem 1.2rem .35rem; text-transform: uppercase;
}
.ok-menu-link {
    display: flex; align-items: center; gap: .65rem;
    color: rgba(255,255,255,.8);
    padding: .62rem 1.2rem; font-size: .94rem;
    border-left: 3px solid transparent;
    transition: background .12s, border-color .12s, color .12s;
    text-decoration: none;
}
.ok-menu-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.ok-menu-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.ok-menu-link.active {
    background: rgba(245,166,35,.12); color: #fff;
    border-left-color: var(--ok-accent); font-weight: 600;
}
/* Alt (girintili) menü öğesi — MasterStudy "↳ Course Category" */
.ok-menu-sub {
    padding-left: 2.2rem; font-size: .88rem;
    color: rgba(255,255,255,.62);
}
.ok-menu-sub .ok-sub-arrow {
    color: rgba(255,255,255,.4); margin-right: -.25rem; font-size: .9rem;
}
.ok-menu-sub.active .ok-sub-arrow { color: var(--ok-accent); }

@media (max-width: 575px) {
    .ok-hero { padding: 3rem 0; }
    .ok-stat { font-size: 1.7rem; }
}

/* ============================================================
   ANİMASYONLAR & GELİŞMİŞ ARAYÜZ
   ============================================================ */

/* --- Scroll reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
.reveal.show { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Hero geliştirme: dekoratif arka plan --- */
.ok-hero { position: relative; overflow: hidden; }
.ok-hero::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(245,166,35,.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ok-hero::after {
    content: "";
    position: absolute;
    bottom: -150px; left: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ok-hero .container { position: relative; z-index: 1; }

/* Hero "rozet" şeridi */
.ok-hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; padding: .35rem .9rem;
    border-radius: 50rem; font-size: .85rem; font-weight: 500;
    backdrop-filter: blur(4px);
    margin-bottom: 1rem;
}
.ok-hero-badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7);
    animation: okPulse 2s infinite;
}
@keyframes okPulse {
    0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
    70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* --- Hero float ikonu --- */
.ok-hero-float { animation: okFloat 5s ease-in-out infinite; }
@keyframes okFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

/* --- Sayaç kartları (hero sağ panel) --- */
.ok-counter-card {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 1rem;
    padding: 1.4rem 1rem;
    text-align: center;
    backdrop-filter: blur(6px);
    transition: transform .25s ease, background .25s ease;
}
.ok-counter-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.16); }
.ok-counter-card .num { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.ok-counter-card .lbl { color: rgba(255,255,255,.8); font-size: .85rem; margin-top: .35rem; }

/* --- İstatistik şeridi sayaç --- */
/* Not: '+' suffix'i app.js sayım sonunda ekler; çift '+' olmasın diye CSS ::after kaldırıldı. */

/* --- Kartlara üst vurgu çizgisi --- */
.ok-card { position: relative; overflow: hidden; }
.ok-card.ok-card-accent::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ok-primary), var(--ok-accent));
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
}
.ok-card.ok-card-accent:hover::before { transform: scaleX(1); }

/* İkon dairesi hover animasyonu */
.ok-card:hover .ok-icon-circle {
    background: var(--ok-primary); color: #fff;
    transform: rotate(-6deg) scale(1.08);
}
.ok-icon-circle { transition: all .3s ease; }

/* --- Navbar scroll gölgesi --- */
.ok-navbar { transition: box-shadow .25s ease, padding .25s ease; }
.ok-navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.18); }

/* --- Buton parlama efekti --- */
.btn-accent { position: relative; overflow: hidden; }
.btn-accent::after {
    content: ""; position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.btn-accent:hover::after { left: 130%; }

/* --- Bölüm başlığı süsü --- */
.ok-section-title { position: relative; display: inline-block; }
.ok-section-title::after {
    content: ""; position: absolute; left: 50%; bottom: -10px;
    width: 56px; height: 4px; border-radius: 2px;
    background: var(--ok-accent); transform: translateX(-50%);
}

/* --- Yorum kartı tırnak --- */
.ok-quote-mark { font-size: 2.4rem; color: var(--ok-accent); line-height: .6; opacity: .5; }

/* --- Paket "popüler" rozeti pulse --- */
.ok-pop-badge { animation: okBob 2.4s ease-in-out infinite; }
@keyframes okBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* --- Sayfa geçiş yumuşatma --- */
html { scroll-behavior: smooth; }

/* --- Slider geçiş efekti zenginleştirme --- */
.carousel-item { transition: transform .8s ease-in-out; }
.ok-slide h1 { animation: okSlideUp .8s ease; }
.ok-slide p, .ok-slide a { animation: okSlideUp 1s ease; }
@keyframes okSlideUp { from { opacity:0; transform: translateY(24px);} to {opacity:1;transform:none;} }

/* ============================================================
   PREMIUM UI v2 — Göz alıcı, modern SaaS hissi
   ============================================================ */

/* --- Tipografi: hero gradient highlight --- */
.ok-grad-text {
    background: linear-gradient(90deg, var(--ok-accent) 0%, #ffd380 50%, var(--ok-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: gradMove 5s linear infinite;
}
@keyframes gradMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* --- Hero: animasyonlu mesh gradient + grid pattern --- */
.ok-hero {
    background:
        radial-gradient(at 20% 30%, rgba(245,166,35,.18) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(74,108,247,.25) 0px, transparent 50%),
        radial-gradient(at 50% 0%, rgba(255,255,255,.06) 0px, transparent 50%),
        linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    animation: meshShift 18s ease-in-out infinite alternate;
}
@keyframes meshShift {
    0%   { background-position: 0% 0%, 100% 100%, 50% 0%, 0 0; }
    100% { background-position: 5% 10%, 90% 95%, 60% 5%, 0 0; }
}
.ok-hero::before, .ok-hero::after { z-index: 0; }
.ok-hero {
    /* Grid pattern overlay */
    position: relative;
}
.ok-hero .ok-grid-pattern {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
    pointer-events: none;
}

/* --- Floating geometric shapes --- */
.ok-shape {
    position: absolute; pointer-events: none; opacity: .12;
    animation: shapeFloat 12s ease-in-out infinite;
}
.ok-shape-1 { top: 12%; left: 8%; width: 40px; height: 40px;
    background: var(--ok-accent); border-radius: 8px; transform: rotate(15deg); }
.ok-shape-2 { top: 60%; left: 14%; width: 28px; height: 28px;
    border: 2px solid #fff; border-radius: 50%; animation-delay: 2s; }
.ok-shape-3 { top: 18%; right: 16%; width: 60px; height: 60px;
    border: 2px solid var(--ok-accent); transform: rotate(45deg); animation-delay: 4s; opacity: .25; }
.ok-shape-4 { bottom: 18%; right: 30%; width: 14px; height: 14px;
    background: #fff; border-radius: 50%; animation-delay: 6s; opacity: .3; }
@keyframes shapeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-24px) rotate(18deg); }
}

/* Hero buton genişletilmiş */
.btn-accent.btn-lg {
    box-shadow: 0 10px 24px -8px rgba(245,166,35,.55);
    transition: all .25s ease;
}
.btn-accent.btn-lg:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -8px rgba(245,166,35,.7); }

/* Hero rozeti — daha glassy */
.ok-hero-badge { box-shadow: 0 4px 18px rgba(0,0,0,.18); }

/* --- Glass counter cards (3D tilt hover) --- */
.ok-counter-card {
    background: linear-gradient(140deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 100%);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 8px 30px -4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .35s;
    transform-style: preserve-3d;
}
.ok-counter-card .num {
    background: linear-gradient(180deg, #fff 0%, #ffd380 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    text-shadow: 0 2px 14px rgba(0,0,0,.15);
}
.ok-counter-card:hover {
    transform: translateY(-8px) rotateX(4deg) rotateY(-4deg);
    box-shadow: 0 22px 48px -10px rgba(0,0,0,.4);
    background: linear-gradient(140deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%);
}

/* --- İstatistik şeridi glass kartlar --- */
.ok-stat {
    background: linear-gradient(180deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* --- Kartlar: 3D tilt + parlama --- */
.ok-card {
    background: #fff;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s;
    will-change: transform;
}
.ok-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px -12px rgba(27,59,111,.22);
    border-color: rgba(27,59,111,.18);
}

/* Kart üst gradient çizgi — daha kalın ve glow */
.ok-card.ok-card-accent::before {
    height: 4px;
    background: linear-gradient(90deg, var(--ok-primary) 0%, var(--ok-accent) 50%, var(--ok-primary) 100%);
    background-size: 200% 100%;
    animation: gradMove 4s linear infinite;
    transform-origin: center;
    transform: scaleX(0);
}
.ok-card.ok-card-accent:hover::before { transform: scaleX(1); }

/* Kartlarda parlama efekti (shine sweep) */
.ok-card::after {
    content: "";
    position: absolute; top: -50%; left: -75%;
    width: 50%; height: 200%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    transform: skewX(-25deg);
    transition: left .8s ease;
    pointer-events: none;
    opacity: 0;
}
.ok-card:hover::after { left: 150%; opacity: 1; }

/* İkon dairesi — gradient arka plan hover */
.ok-icon-circle {
    background: linear-gradient(135deg, rgba(27,59,111,.12) 0%, rgba(27,59,111,.06) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.ok-card:hover .ok-icon-circle {
    background: linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    color: #fff;
    transform: rotate(-8deg) scale(1.12);
    box-shadow: 0 10px 24px -6px rgba(27,59,111,.45);
}

/* Kurum kartları daha güçlü */
.ok-card-accent.text-center .ok-icon-circle { width: 64px; height: 64px; font-size: 1.7rem; }

/* --- Sınav kartında trending rozet --- */
.ok-trend-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    background: linear-gradient(90deg, rgba(245,166,35,.18), rgba(245,166,35,.06));
    color: #a8700a; font-size: .72rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 50rem;
    border: 1px solid rgba(245,166,35,.3);
}

/* --- Bölüm başlığı: gradient çizgi --- */
.ok-section-title::after {
    width: 72px; height: 5px;
    background: linear-gradient(90deg, var(--ok-primary), var(--ok-accent));
    border-radius: 3px;
    box-shadow: 0 4px 12px -2px rgba(245,166,35,.5);
}

/* Bölüm başlığı üstü süs etiket */
.ok-eyebrow {
    display: inline-block;
    color: var(--ok-accent);
    font-weight: 700; font-size: .85rem;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: .6rem;
}

/* --- Yorum kartları — premium look --- */
.ok-quote-mark {
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--ok-accent);
    opacity: .25;
    line-height: 0;
    margin-bottom: 1rem;
    display: block;
    margin-top: 1rem;
}

/* Yorum kullanıcı avatarı — gradient */
.ok-card .ok-icon-circle[data-init] {
    background: linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-accent) 100%);
    color: #fff;
    font-weight: 700; font-size: 1.1rem;
}

/* --- Verified badge --- */
.ok-verified {
    display: inline-flex; align-items: center; gap: .2rem;
    background: rgba(13,110,253,.12); color: #0d6efd;
    font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 50rem;
    margin-left: .35rem;
}

/* --- Yıldız animasyonu --- */
.ok-stars i { transition: transform .3s; }
.ok-card:hover .ok-stars i { animation: starPop .4s ease both; }
.ok-card:hover .ok-stars i:nth-child(1) { animation-delay: .05s; }
.ok-card:hover .ok-stars i:nth-child(2) { animation-delay: .1s; }
.ok-card:hover .ok-stars i:nth-child(3) { animation-delay: .15s; }
.ok-card:hover .ok-stars i:nth-child(4) { animation-delay: .2s; }
.ok-card:hover .ok-stars i:nth-child(5) { animation-delay: .25s; }
@keyframes starPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4) rotate(-12deg); }
    100% { transform: scale(1) rotate(0); }
}

/* --- CTA arka plan dalgalı pattern --- */
.ok-cta-wave {
    background:
        radial-gradient(at 20% 50%, rgba(245,166,35,.2) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(74,108,247,.2) 0px, transparent 50%),
        linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    position: relative; overflow: hidden;
}
.ok-cta-wave::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 70%);
}

/* --- Navbar premium hissi --- */
.ok-navbar {
    background: rgba(27,59,111,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ok-navbar.scrolled {
    background: rgba(27,59,111,.96);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,.3);
}
.ok-navbar .navbar-brand img { transition: transform .25s; }
.ok-navbar .navbar-brand:hover img { transform: scale(1.05); }

/* Navbar link altı çizgi animasyon */
.ok-navbar .nav-link {
    position: relative;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
}
.ok-navbar .nav-link::after {
    content: ""; position: absolute;
    left: 50%; bottom: 4px;
    width: 0; height: 2px;
    background: var(--ok-accent);
    transition: width .3s, left .3s;
}
.ok-navbar .nav-link:hover::after { width: calc(100% - 1.8rem); left: .9rem; }

/* --- Mikro etkileşimler --- */
.ok-arrow-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 600;
    transition: gap .25s;
}
.ok-arrow-link:hover { gap: .6rem; }

/* --- Hero arrow bounce --- */
.ok-scroll-hint {
    position: absolute; left: 50%; bottom: 24px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.55);
    font-size: 1.5rem;
    animation: bounceDown 2s ease-in-out infinite;
    cursor: pointer;
    z-index: 2;
}
@keyframes bounceDown {
    0%, 100% { transform: translate(-50%, 0); opacity: .55; }
    50% { transform: translate(-50%, 10px); opacity: 1; }
}

/* --- Premium responsive ayarları --- */
@media (max-width: 575px) {
    .ok-counter-card .num { font-size: 1.6rem; }
    .ok-shape { display: none; }
    .ok-scroll-hint { display: none; }
}

/* ============================================================
   ÜYE PANELİ — Premium
   ============================================================ */

/* Panel hero (her sayfa üstünde) */
.ok-panel-hero {
    background:
        radial-gradient(at 20% 30%, rgba(245,166,35,.18) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(74,108,247,.22) 0px, transparent 50%),
        linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    padding: 2.2rem 0;
    margin-bottom: -2rem;  /* alt konteyner üstünde yarı bindirir */
    padding-bottom: 4rem;
    position: relative;
    overflow: hidden;
}
.ok-panel-hero h1 { font-size: 1.7rem; }
.ok-panel-hero-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ok-accent) 0%, #ffba47 100%);
    color: #1b1b1b; font-size: 1.7rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(245,166,35,.55);
    flex-shrink: 0;
}

/* Panel ana container (hero altında konumlanır) */
.ok-panel-body {
    position: relative;
    z-index: 4;
    padding-bottom: 4rem;
    min-height: 600px;  /* kısa içerikte footer çakışmasını önle */
    background: var(--ok-light);
}
.ok-panel-body .row { align-items: flex-start; }  /* sticky için */

/* Sidebar — masaüstünde sticky (scroll'da sabit kalır) */
@media (min-width: 992px) {
    .ok-panel-sidebar {
        position: sticky;
        top: 80px;  /* navbar yüksekliği + boşluk */
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .ok-panel-sidebar::-webkit-scrollbar { width: 4px; }
    .ok-panel-sidebar::-webkit-scrollbar-thumb { background: rgba(27,59,111,.2); border-radius: 2px; }
}
@media (max-width: 991px) {
    .ok-panel-sidebar { margin-bottom: 1.5rem; }
}

/* Üye kartı (sidebar üstünde) */
.ok-acc-userbox {
    background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
}
.ok-acc-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-accent) 100%);
    color: #fff; font-weight: 700; font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px -10px rgba(27,59,111,.6);
}
.ok-prem-badge {
    background: linear-gradient(90deg, var(--ok-accent), #ffba47);
    color: #1b1b1b; font-weight: 700;
    padding: .35rem .8rem;
}

/* Sidebar menü */
.ok-acc-menu { padding: .5rem !important; }
.ok-acc-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .85rem;
    border-radius: .55rem;
    color: #4b5260; font-weight: 500; font-size: .95rem;
    transition: background .2s, color .2s, transform .2s;
    text-decoration: none;
}
.ok-acc-link:hover { background: var(--ok-light); color: var(--ok-primary); transform: translateX(3px); }
.ok-acc-link.active {
    background: linear-gradient(90deg, rgba(27,59,111,.08) 0%, rgba(245,166,35,.05) 100%);
    color: var(--ok-primary); font-weight: 700;
}
.ok-acc-link-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(27,59,111,.08);
    color: var(--ok-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: all .25s;
}
.ok-acc-link.active .ok-acc-link-icon {
    background: linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(27,59,111,.5);
}

/* Panel içi metric/stat kartları */
.ok-mini-card {
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: .75rem;
    padding: 1.3rem 1.2rem;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.ok-mini-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -10px rgba(27,59,111,.18); }
.ok-mini-card .label { color: #6b7280; font-size: .85rem; margin-bottom: .35rem; font-weight: 500; }
.ok-mini-card .value { color: var(--ok-primary); font-size: 2rem; font-weight: 800; line-height: 1; }
.ok-mini-card .icon {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.ok-mini-card.success .icon { background: rgba(25,135,84,.12); color: #198754; }
.ok-mini-card.warning .icon { background: rgba(245,166,35,.15); color: #b07614; }
.ok-mini-card.info    .icon { background: rgba(13,110,253,.12); color: #0d6efd; }
.ok-mini-card.primary .icon { background: rgba(27,59,111,.12); color: var(--ok-primary); }
.ok-mini-card.danger  .icon { background: rgba(220,53,69,.12); color: #dc3545; }
.ok-mini-card.success .value { color: #198754; }
.ok-mini-card.warning .value { color: #b07614; }
.ok-mini-card.info    .value { color: #0d6efd; }
.ok-mini-card.danger  .value { color: #dc3545; }

/* Açıkça başlık alanı */
.ok-panel-section-title {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 700; color: #2b2f38;
    margin-bottom: 1.2rem; font-size: 1.1rem;
}
.ok-panel-section-title::before {
    content: ""; width: 4px; height: 20px;
    background: linear-gradient(180deg, var(--ok-primary), var(--ok-accent));
    border-radius: 2px;
}

/* Tablo görünümü */
.ok-panel-table { margin-bottom: 0; }
.ok-panel-table thead th {
    background: #f9fbff; color: #6b7280;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid #e9edf3;
    padding: .9rem 1rem;
}
.ok-panel-table tbody td { padding: .9rem 1rem; vertical-align: middle; }
.ok-panel-table tbody tr { transition: background .15s; }
.ok-panel-table tbody tr:hover { background: var(--ok-light); }

/* Mobilde panel hero küçülsün */
@media (max-width: 575px) {
    .ok-panel-hero { padding: 1.4rem 0 3rem; }
    .ok-panel-hero h1 { font-size: 1.3rem; }
    .ok-panel-hero-icon { width: 44px; height: 44px; font-size: 1.3rem; }
}

/* ============================================================
   KURS OYNATICI (LMS Player)
   ============================================================ */
.ok-player { display:flex; min-height:calc(100vh - 56px); background:#fff; }
.ok-player-sidebar {
    width:340px; flex-shrink:0; border-right:1px solid #e9edf3;
    background:#fafbfd; overflow-y:auto; max-height:calc(100vh - 56px);
    position:sticky; top:56px;
}
.ok-player-curr { padding-bottom:2rem; }
.ok-curr-section-head {
    padding:.7rem 1rem; font-weight:700; font-size:.85rem;
    background:#eef2f8; color:#2b2f38; position:sticky; top:0;
}
.ok-curr-item {
    display:flex; align-items:center; gap:.6rem;
    padding:.65rem 1rem; color:#4b5260; font-size:.9rem;
    text-decoration:none; border-bottom:1px solid #f0f3f8;
    transition:background .15s;
}
.ok-curr-item:hover { background:#eef2f8; color:var(--ok-primary); }
.ok-curr-item.active { background:#fff; color:var(--ok-primary); font-weight:600; border-left:3px solid var(--ok-accent); }
.ok-curr-icon { font-size:1.05rem; flex-shrink:0; width:20px; text-align:center; }
.ok-player-main { flex-grow:1; overflow-y:auto; }
.ok-player-content { max-width:900px; margin:0 auto; padding:2rem 1.5rem; }
@media (max-width:860px){
    .ok-player { flex-direction:column; }
    .ok-player-sidebar { width:100%; position:static; max-height:none; border-right:none; border-bottom:1px solid #e9edf3; }
}

/* ============================================================
   PDF GÖRÜNTÜLEYİCİ (PDF.js)
   ============================================================ */
.ok-pdf { border:1px solid #e9edf3; border-radius:.6rem; overflow:hidden; background:#f4f6fa; }
.ok-pdf-toolbar {
    display:flex; justify-content:space-between; align-items:center;
    gap:.5rem; padding:.5rem .75rem; background:#fff; border-bottom:1px solid #e9edf3;
    flex-wrap:wrap; position:sticky; top:0; z-index:2;
}
.ok-pdf-toolbar .btn-light { border:1px solid #e2e8f0; }
.ok-pdf-page { white-space:nowrap; }
.ok-pdf-stage {
    max-height:78vh; overflow:auto; padding:12px;
    display:flex; justify-content:center; align-items:flex-start;
    background:#525659;
}
.ok-pdf-canvas { box-shadow:0 4px 18px rgba(0,0,0,.3); border-radius:2px; max-width:100%; }
.ok-pdf-loading { width:100%; color:#fff !important; }
.ok-pdf-loading .small { color:rgba(255,255,255,.7); }

/* ============================================================
   KURS EDİTÖRÜ (MasterStudy benzeri)
   ============================================================ */
.ok-edit-tabs { border-bottom:2px solid #e9edf3; }
.ok-edit-tabs .nav-link { color:#6b7280; font-weight:600; border:none; padding:.7rem 1rem; }
.ok-edit-tabs .nav-link:hover { color:var(--ok-primary); border:none; }
.ok-edit-tabs .nav-link.active { color:var(--ok-primary); background:none; border:none; border-bottom:3px solid var(--ok-accent); }

/* Bölüm kartı */
.ok-sec-card { background:#fff; border:1px solid #e6eaf0; border-radius:.7rem; box-shadow:0 1px 3px rgba(16,24,40,.05); }
.ok-sec-head { display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem; background:#fff; border-bottom:1px solid #eef1f6; font-size:1.02rem; border-radius:.7rem .7rem 0 0; }
.ok-sec-items { padding:.25rem 0; }
.ok-item { display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-bottom:1px solid #f4f6fa; }
.ok-item:last-child { border-bottom:none; }
.ok-item:hover { background:#fafbfd; }
.ok-item-ic { font-size:1.1rem; }
.ok-drag { color:#c3ccda; cursor:grab; }
.ok-sec-foot { padding:.7rem 1rem; background:#fafbfd; border-top:1px solid #eef1f6; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; border-radius:0 0 .7rem .7rem; }
.ok-add-btn { background:#eef3fb; color:var(--ok-primary); border:1px solid #dbe6f7; font-weight:600; }
.ok-add-btn:hover { background:var(--ok-primary); color:#fff; }
.ok-newsec { margin-top:1rem; }
.ok-newsec .input-group-text { border-right:none; }

/* Kurs oynatıcı — kilitli item */
.ok-curr-locked { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; opacity:.65; cursor:not-allowed; }
.ok-curr-locked:hover { background:transparent; }