/* ==========================================================================
   Mutes Yazılım Evi - "Okyanus & Gün Işığı" tasarım dili
   Lacivert derinlik + logodaki okyanus mavisi + tek bir sıcak vurgu (gün ışığı).
   Renk jetonları: resources/views/layouts/_head.php (Tailwind config)
   ========================================================================== */

:root {
    --bg: #050b17;
    --ocean: 56 189 248;     /* brand-400 */
    --sun: 251 191 36;       /* sun-400 */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgb(var(--sun) / .85); color: #1a1203; }
:focus-visible { outline: 2px solid rgb(var(--sun)); outline-offset: 3px; border-radius: 6px; }

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #16253f; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #22406b; }

/* ------------------------------------------------------------------ Arka plan: aurora + ızgara + doku */
.bg-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-stage .blob { position: absolute; border-radius: 9999px; filter: blur(110px); opacity: .55; will-change: transform; }
.bg-stage .b1 { width: 52vw; height: 52vw; left: -14vw; top: -18vw; background: radial-gradient(circle, rgb(14 116 144 / .9), transparent 65%); animation: drift-a 26s ease-in-out infinite alternate; }
.bg-stage .b2 { width: 46vw; height: 46vw; right: -16vw; top: 8vh; background: radial-gradient(circle, rgb(30 64 175 / .8), transparent 65%); animation: drift-b 32s ease-in-out infinite alternate; }
.bg-stage .b3 { width: 34vw; height: 34vw; left: 30vw; bottom: -22vw; background: radial-gradient(circle, rgb(var(--sun) / .22), transparent 65%); animation: drift-a 38s ease-in-out infinite alternate-reverse; }
.bg-stage .grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgb(125 211 252 / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(125 211 252 / .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
.bg-stage .noise {
    position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.18); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-9vw, 10vh, 0) scale(.95); } }

/* ------------------------------------------------------------------ Tipografi yardımcıları */
.font-display { letter-spacing: -0.025em; }
.serif-accent { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.text-ocean {
    background: linear-gradient(100deg, #e0f2fe 0%, #7dd3fc 45%, #38bdf8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-sunrise {
    background: linear-gradient(100deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font: 600 .72rem/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7dd3fc;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, rgb(var(--sun)), transparent); }

/* ------------------------------------------------------------------ Düğmeler */
.btn-sun, .btn-ghost {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    border-radius: 9999px; font-weight: 600; transition: transform .25s var(--ease-out), box-shadow .25s, background .25s, border-color .25s;
}
.btn-sun {
    padding: .95rem 1.7rem; color: #1a1203;
    background: linear-gradient(180deg, #fcd34d, #f59e0b);
    box-shadow: 0 10px 30px rgb(var(--sun) / .28), inset 0 1px 0 rgb(255 255 255 / .55);
}
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgb(var(--sun) / .38), inset 0 1px 0 rgb(255 255 255 / .6); }
.btn-sun svg { transition: transform .25s var(--ease-out); }
.btn-sun:hover svg { transform: translateX(4px); }
.btn-ghost {
    padding: .95rem 1.6rem; color: #e2e8f0;
    background: rgb(15 29 53 / .55); border: 1px solid rgb(125 211 252 / .18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: rgb(125 211 252 / .45); background: rgb(15 29 53 / .85); }

/* ------------------------------------------------------------------ Kartlar + imleç ışığı */
.card {
    position: relative; border-radius: 1.5rem;
    background: linear-gradient(180deg, rgb(12 24 45 / .78), rgb(8 17 33 / .78));
    border: 1px solid rgb(125 211 252 / .09);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 18px 50px rgb(0 0 0 / .35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.spot { position: relative; --mx: 50%; --my: 50%; }
.spot::before, .spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
.spot::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--ocean) / .13), transparent 45%); }
.spot::after {
    padding: 1px;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgb(125 211 252 / .65), transparent 62%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ------------------------------------------------------------------ Gezinme çubuğu */
.nav { transition: background .35s, border-color .35s, box-shadow .35s, height .35s; border-bottom: 1px solid transparent; }
.nav.is-scrolled {
    background: rgb(5 11 23 / .72);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border-color: rgb(125 211 252 / .09); box-shadow: 0 10px 40px rgb(0 0 0 / .35);
}
.nav-link { position: relative; padding: .35rem 0; color: #94a3b8; font-size: .875rem; font-weight: 500; transition: color .2s; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(var(--sun)), rgb(var(--ocean))); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav-link:hover, .nav-link.is-active { color: #fff; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, rgb(var(--ocean)), rgb(var(--sun))); }

/* ------------------------------------------------------------------ Belirme (reveal) animasyonları */
html.js [data-reveal], html.js .fade-up {
    opacity: 0; transform: translate3d(0, 30px, 0);
    transition: opacity .9s var(--ease-out) var(--rd, 0ms), transform .9s var(--ease-out) var(--rd, 0ms);
}
html.js [data-reveal="left"]  { transform: translate3d(-42px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(42px, 0, 0); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal="fade"]  { transform: none; }
html.js [data-reveal].is-in, html.js .fade-up.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ Sürekli hareketler */
@keyframes float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.animate-float { animation: float 7s ease-in-out infinite; }
.animate-marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }
.shine-text {
    background: linear-gradient(100deg, #7dd3fc 20%, #fff 40%, #fbbf24 55%, #7dd3fc 75%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 7s linear infinite;
}

/* Hero: dönen kelime */
.rotator { display: inline-block; position: relative; }
.rotator > span { display: inline-block; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rotator.is-out > span { opacity: 0; transform: translateY(14px); }

/* Hero: küre kutusu */
.globe-box { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.globe-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Adım çizgisi (nasıl çalışır) */
.steps-line { position: absolute; left: 1.35rem; top: 1rem; bottom: 1rem; width: 2px; background: rgb(125 211 252 / .12); border-radius: 2px; overflow: hidden; }
.steps-line > i { position: absolute; inset: 0 0 auto 0; height: calc(var(--sp, 0) * 100%); background: linear-gradient(180deg, rgb(var(--ocean)), rgb(var(--sun))); }

.step .dot { box-shadow: 0 0 0 0 rgb(var(--sun) / 0); }
.step.is-on .dot { color: #1a1203; border-color: transparent; background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: 0 0 0 6px rgb(var(--sun) / .12); }

/* Mockup yüzeyi (ürün sayfası) */
.window-bar { background: linear-gradient(180deg, rgb(255 255 255 / .05), transparent); }

/* ------------------------------------------------------------------ Yönetim paneli */
.adm-nav a { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: .75rem; color: #94a3b8; font-size: .875rem; font-weight: 500; transition: background .2s, color .2s; }
.adm-nav a:hover { background: rgb(15 29 53 / .9); color: #fff; }
.adm-nav a.is-active { background: linear-gradient(90deg, rgb(var(--ocean) / .16), transparent); color: #fff; box-shadow: inset 2px 0 0 rgb(var(--ocean)); }
.field-label { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 600; color: #cbd5e1; }
.field-hint { margin-top: .4rem; font-size: .75rem; color: #64748b; }
.field-error { margin-top: .4rem; font-size: .78rem; color: #fda4af; }
.field-input {
    width: 100%; padding: .8rem 1rem; color: #f1f5f9; font-size: .9rem; line-height: 1.5;
    background: rgb(5 11 23 / .7); border: 1px solid #1e2f4d; border-radius: .85rem;
    transition: border-color .2s, box-shadow .2s;
}
.field-input::placeholder { color: #475569; }
.field-input:focus { outline: none; border-color: rgb(var(--ocean)); box-shadow: 0 0 0 3px rgb(var(--ocean) / .18); }
.field-input.has-error { border-color: #fb7185; }

/* Hatalı form alanı: kırmızı neon çerçeve (kayıt formu; sayfa yenilenmeden uygulanır) */
.neon-error {
    border-color: #ff2e4d !important;
    box-shadow: 0 0 0 1px #ff2e4d, 0 0 14px 2px rgb(255 46 77 / .55), inset 0 0 8px rgb(255 46 77 / .18) !important;
    animation: neon-shake .35s ease-in-out;
}
.neon-msg { margin-top: .35rem; font-size: .78rem; color: #ff6b81; text-shadow: 0 0 8px rgb(255 46 77 / .5); }
@keyframes neon-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .neon-error { animation: none; } }

/* ------------------------------------------------------------------ Azaltılmış hareket tercihi */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js [data-reveal], html.js .fade-up { opacity: 1; transform: none; transition: none; }
    .bg-stage .blob, .animate-float, .animate-marquee, .shine-text { animation: none !important; }
}

/* Yasal metinler (Legal::render): başlık + paragraf */
.legal-doc { color: #a1a1aa; font-size: .92rem; line-height: 1.75; }
.legal-doc h2 { color: #fff; font-weight: 700; font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.legal-doc h2:first-child { margin-top: 0; font-size: 1.25rem; }
.legal-doc p { margin: 0 0 .9rem; }
.legal-box { max-height: 16rem; overflow-y: auto; padding: 1rem 1.25rem; border: 1px solid rgb(63 63 70 / .6); border-radius: .75rem; background: rgb(9 9 11 / .5); }
.field-input[type="date"], .field-input[type="datetime-local"] { color-scheme: dark; cursor: pointer; }

/* ------------------------------------------------------------------ Giriş / kayıt (auth/portal.php)
   Masaüstü: iki form yan yana; renkli panel kullanılmayanın üstünü örter, data-mode değişince kayar. Mobil: sekme + tek form. */
.auth-card {
    position: relative; display: grid; overflow: hidden; border-radius: 1.75rem;
    background: rgb(10 20 38 / .9); border: 1px solid #16253f; backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .05);
}
.auth-pane { display: flex; align-items: center; padding: 2.25rem 1.5rem; transition: opacity .45s ease, transform .7s var(--ease-out), filter .45s ease; }
.auth-badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 9999px;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: #7dd3fc; background: rgb(var(--ocean) / .1); border: 1px solid rgb(var(--ocean) / .3);
}
.auth-badge-sun { color: #fcd34d; background: rgb(var(--sun) / .1); border-color: rgb(var(--sun) / .35); }

.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: .3rem; margin-bottom: 1rem; border-radius: 9999px; background: rgb(10 20 38 / .9); border: 1px solid #16253f; }
.auth-tabs::before { content: ''; position: absolute; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .3rem); border-radius: 9999px; background: linear-gradient(135deg, #0ea5e9, #2563eb); box-shadow: 0 6px 20px rgb(var(--ocean) / .35); transition: transform .45s var(--ease-out), background .45s; }
[data-mode="register"] .auth-tabs::before { transform: translateX(100%); background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 6px 20px rgb(var(--sun) / .35); }
.auth-tabs a { position: relative; z-index: 1; text-align: center; padding: .65rem 0; font-weight: 600; font-size: .9rem; color: #94a3b8; border-radius: 9999px; transition: color .3s; }
.auth-tabs a[aria-selected="true"] { color: #fff; }
[data-mode="register"] .auth-tabs a[aria-selected="true"] { color: #1a1203; }

.auth-overlay { display: none; }
@media (max-width: 767px) {
    [data-mode="login"] .auth-register, [data-mode="register"] .auth-login { display: none; }
}
@media (min-width: 768px) {
    .auth-card { grid-template-columns: 1fr 1fr; min-height: 680px; }
    .auth-pane { grid-row: 1; padding: 3rem 2.75rem; }
    .auth-login { grid-column: 1; }
    .auth-register { grid-column: 2; }
    [data-mode="login"] .auth-register { opacity: 0; transform: translateX(-12%); filter: blur(4px); }
    [data-mode="register"] .auth-login { opacity: 0; transform: translateX(12%); filter: blur(4px); }

    .auth-overlay {
        display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; z-index: 5; overflow: hidden;
        transform: translateX(100%); transition: transform .8s cubic-bezier(.7, 0, .2, 1), border-radius .8s;
        border-radius: 7rem 0 0 7rem;
        background:
            radial-gradient(circle at 85% 10%, rgb(var(--sun) / .55), transparent 40%),
            radial-gradient(circle at 10% 95%, rgb(56 189 248 / .45), transparent 45%),
            linear-gradient(150deg, #0369a1 0%, #1e3a8a 55%, #0c1a3a 100%);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / .15);
    }
    [data-mode="register"] .auth-overlay { transform: translateX(0); border-radius: 0 7rem 7rem 0; }
    .auth-overlay::after { /* cam parıltısı */
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(120deg, transparent 30%, rgb(255 255 255 / .08) 45%, transparent 60%);
    }
    .auth-msg {
        position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem;
        transition: opacity .5s ease .15s, transform .8s cubic-bezier(.7, 0, .2, 1);
    }
    [data-mode="login"] .auth-msg-login { opacity: 0; transform: translateX(-30%); pointer-events: none; }
    [data-mode="register"] .auth-msg-register { opacity: 0; transform: translateX(30%); pointer-events: none; }
}
.auth-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fcd34d; margin-bottom: .75rem; }
.auth-switch {
    display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 2rem; border-radius: 9999px; font-weight: 600; color: #fff;
    border: 1px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .08); backdrop-filter: blur(6px);
    transition: transform .25s var(--ease-out), background .25s, border-color .25s;
}
.auth-switch:hover { transform: translateY(-2px); background: rgb(255 255 255 / .18); border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .auth-pane, .auth-overlay, .auth-msg, .auth-tabs::before { transition: none; }
}