:root {
    color-scheme: light;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f7fb;
    color: #17345b;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible {
    outline: 2px solid #8db8ff;
    outline-offset: 4px;
}
a { color: inherit; text-decoration: none; }
.focus-app {
    min-height: 100vh;
    background: #f5f7fb;
    display: flex;
    flex-direction: column;
}
.focus-header {
    min-height: 86px;
    padding: 20px clamp(22px,5vw,90px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.065);
}
.focus-brand { display: flex; gap: 12px; align-items: center; font-weight: 850; letter-spacing: .055em; font-size: 15px; }
.focus-brand-mark {
    width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 12px; background: #f16d49; font-size: 22px; font-weight: 900;
}
.focus-brand small { display: block; font-size: 9px; letter-spacing: .18em; color: #8fa6c2; margin-top: 4px; }
.focus-header-actions { display: flex; align-items: center; gap: 15px; }
.focus-status { font-size: 10px; font-weight: 750; letter-spacing: .13em; color: #93a9c6; }
.focus-status i { display: inline-block; width: 7px; height: 7px; background: #6ec7a2; border-radius: 50%; margin-right: 7px; }
.focus-icon-btn, .focus-exit {
    min-height: 38px; border: 1px solid #30415b; border-radius: 9px;
    background: #16253a; padding: 9px 12px; color: #e5edfa;
}
.focus-exit { font-size: 12px; font-weight: 650; }
.focus-exit span { margin-left: 8px; color: #f16d49; }
.focus-main {
    width: min(1120px,calc(100% - 40px)); margin: auto;
    padding: 45px 0 55px;
    display: grid; grid-template-columns: minmax(0,1fr) 290px;
    gap: clamp(30px,5vw,75px); align-items: center;
}
.focus-panel { text-align: center; min-width: 0; }
.focus-eyebrow { color: #92a9c7; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.focus-dot { display: inline-block; width: 7px; height: 7px; background: #f16d49; border-radius: 50%; margin-right: 7px; }
h1 { font-size: clamp(29px,4vw,49px); letter-spacing: -.055em; margin: 15px 0 8px; font-weight: 800; }
h1 em { color: #f47b58; font-style: normal; }
.focus-description { color: #90a4bf; font-size: 14px; margin: 0 0 27px; }
.focus-settings { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.focus-settings label { display: flex; flex-direction: column; text-align: left; gap: 7px; color: #9cb0ca; font-size: 11px; }
.focus-settings select {
    min-width: 145px; max-width: 185px; border: 1px solid #2d405b;
    border-radius: 10px; padding: 11px 30px 11px 12px; background: #17263c;
    color: #f3f7ff; font-size: 12px;
}
.focus-timer-area { display: grid; place-items: center; padding: 8px 0 25px; }
.focus-timer-ring {
    --progress: 0%;
    width: min(310px,75vw); aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(#f16d49 var(--progress),#253850 0);
    padding: 5px; box-shadow: 0 0 85px rgba(45,87,140,.12);
}
.focus-timer-inner {
    height: 100%; border-radius: 50%; background: #101e31;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.focus-session-label { color: #8ea8c7; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.focus-time { font-size: clamp(55px,8vw,83px); letter-spacing: -.065em; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.3; }
.focus-timer-hint { color: #8fa3bc; font-size: 12px; }
.focus-controls { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.focus-controls button { min-height: 48px; padding: 12px 18px; border-radius: 11px; font-size: 12px; font-weight: 750; transition: transform .2s,background .2s; }
.focus-controls button:hover { transform: translateY(-2px); }
.focus-primary { background: #f16d49; border: 1px solid #f16d49; color: #fff; min-width: 210px; }
.focus-secondary { background: #18283e; border: 1px solid #31435e; color: #dce7f7; }
.focus-session-meta { display: flex; align-items: center; justify-content: center; gap: 12px; color: #7e94b1; font-size: 11px; margin-top: 18px; }
.focus-meta-divider { width: 3px; height: 3px; border-radius: 50%; background: #7086a4; }
.focus-stats { padding: 25px; border: 1px solid #293a51; background: rgba(21,36,56,.7); border-radius: 20px; }
.focus-stats-heading { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 800; color: #9fb3cd; letter-spacing: .08em; }
.focus-stats-heading span:last-child { font-weight: 500; letter-spacing: 0; }
.focus-stats-grid { display: grid; gap: 12px; margin-top: 24px; }
.focus-stat { padding: 18px; border: 1px solid #2b3d57; border-radius: 13px; background: #192b43; }
.focus-stat span { display: block; font-size: 11px; color: #9cb0ca; margin-bottom: 9px; }
.focus-stat strong { font-size: 27px; letter-spacing: -.04em; }
.focus-quote { border-top: 1px solid #2c3d54; margin-top: 22px; padding-top: 20px; }
.focus-quote span { color: #f16d49; font-size: 23px; }
.focus-quote p { font-size: 13px; color: #b0c2d8; line-height: 1.7; }
.focus-privacy { font-size: 10px; line-height: 1.6; color: #7f93ae; }
.focus-footer { display: flex; justify-content: space-between; gap: 15px; padding: 22px clamp(22px,5vw,90px); border-top: 1px solid rgba(255,255,255,.06); color: #758ba7; font-size: 11px; }
@media (max-width: 850px) {
    .focus-main { grid-template-columns: 1fr; max-width: 620px; padding: 38px 0; }
    .focus-stats { max-width: 500px; width: 100%; margin: auto; }
    .focus-stats-grid { grid-template-columns: 1fr 1fr; }
    .focus-header { padding: 15px 20px; }
}
@media (max-width: 480px) {
    .focus-status { display: none; }
    .focus-brand { font-size: 12px; }
    .focus-brand-mark { width: 36px; height: 36px; }
    .focus-header-actions { gap: 7px; }
    .focus-main { width: calc(100% - 28px); }
    .focus-settings select { min-width: 0; width: 100%; }
    .focus-settings label { flex: 1; }
    .focus-timer-ring { width: min(285px,80vw); }
    .focus-primary { min-width: 100%; }
    .focus-stats { padding: 18px; }
    .focus-footer { flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { transition: none !important; animation: none !important; }
}

/* Odak Modu - Global layout uyumu */
body:has(.focus-app) {
    background: #091525;
}
body:has(.focus-app) #content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
body:has(.focus-app) .focus-app {
    min-height: 100vh;
}
body:has(.focus-app) .focus-main {
    min-height: calc(100vh - 180px);
}

/* Tam ekran odak modunda yalnızca çalışma alanı */
.focus-app:fullscreen {
    overflow-y: auto;
    height: 100vh;
}
.focus-app:fullscreen .focus-main {
    min-height: 100vh;
}


/* FOCUS THEME V2 — LIGHT PAGE / DARK FULLSCREEN */
body:has(.focus-app) {
    background: #f5f7fb;
    color: #17345b;
}

body:has(.focus-app) #content {
    background: #f5f7fb;
}

.focus-app {
    background: #f5f7fb;
    color: #17345b;
}

.focus-panel h1,
.focus-time,
.focus-stat strong {
    color: #17345b;
}

.focus-panel h1 em {
    color: #e76f4d;
}

.focus-description,
.focus-eyebrow,
.focus-session-label,
.focus-timer-hint,
.focus-session-meta,
.focus-settings label {
    color: #647991;
}

.focus-settings select {
    background: #fff;
    color: #17345b;
    border-color: #dce5ef;
}

.focus-timer-ring {
    background: conic-gradient(#e76f4d var(--progress), #e4eaf2 0);
}

.focus-timer-inner {
    background: #fff;
}

.focus-secondary {
    background: #fff;
    border-color: #dce5ef;
    color: #17345b;
}

.focus-stats {
    background: #fff;
    border-color: #e2e9f2;
}

.focus-stats-heading,
.focus-stat span,
.focus-privacy,
.focus-quote p {
    color: #647991;
}

.focus-stat {
    background: #f7f9fc;
    border-color: #e4eaf2;
}

.focus-quote {
    border-color: #e4eaf2;
}

.focus-fullscreen-bar {
    display: none;
}

/* Koyu tema sadece gerçek tam ekranda */
.focus-app:fullscreen {
    color-scheme: dark;
    color: #fff;
    background: radial-gradient(ellipse at 50% 25%, #183456, #091525 70%);
    height: 100vh;
    overflow-y: auto;
}

.focus-app:fullscreen .focus-main {
    min-height: 100vh;
    width: min(760px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 75px 0 35px;
}

.focus-app:fullscreen .focus-panel h1,
.focus-app:fullscreen .focus-description,
.focus-app:fullscreen .focus-eyebrow,
.focus-app:fullscreen .focus-settings,
.focus-app:fullscreen .focus-stats {
    display: none;
}

.focus-app:fullscreen .focus-timer-inner {
    background: #101e31;
}

.focus-app:fullscreen .focus-timer-ring {
    width: min(390px, 76vw);
    background: conic-gradient(#f16d49 var(--progress), #253850 0);
}

.focus-app:fullscreen .focus-time {
    color: #fff;
}

.focus-app:fullscreen .focus-session-label,
.focus-app:fullscreen .focus-timer-hint,
.focus-app:fullscreen .focus-session-meta {
    color: #a7bad3;
}

.focus-app:fullscreen .focus-secondary {
    background: #192b43;
    border-color: #30445f;
    color: #fff;
}

.focus-app:fullscreen .focus-fullscreen-bar {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    color: #a9bdd7;
    font-size: 11px;
}

.focus-fullscreen-bar button {
    padding: 10px 14px;
    border: 1px solid #34465f;
    border-radius: 9px;
    background: #1a2c43;
    color: #fff;
}

/* FOCUS EXIT CONTROLS V1 */
.focus-back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin: 22px 0 0 max(20px, calc((100% - 1100px) / 2));
    padding: 10px 15px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
    color: #17345b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.focus-back-link:hover {
    background: #f1f5fa;
    border-color: #bdcce0;
}
.focus-app:fullscreen .focus-back-link {
    display: none;
}
.focus-app:fullscreen .focus-fullscreen-bar {
    display: flex;
}
.focus-app:fullscreen .focus-fullscreen-bar button {
    cursor: pointer;
}
@media (max-width: 600px) {
    .focus-back-link { margin-left: 16px; }
}


/* Custom study duration */
.focus-custom-duration[hidden] { display: none !important; }
.focus-custom-duration {
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
    color: #17345b;
    font: inherit;
    font-size: 13px;
}
.focus-custom-duration:focus-visible {
    outline: 2px solid #e76f4d;
    outline-offset: 2px;
}