html, body {
    max-width: 100%;
    overflow-x: hidden;
}
* , *::before, *::after { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 16px) env(safe-area-inset-left);
    color: var(--text-color);
    margin: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--background-image, url('bayrak.jpg'));
    background-color: var(--background-color, #0b0f17);
}

.container {
    text-align: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 16px;
    overflow-x: hidden;
}
.title-block {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    padding: 10px 20px;
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.block {
    border-radius: 16px;
    padding: 12px;
    margin: 6px auto;
    width: 100%;
    max-width: 320px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.count {
    font-size: clamp(32px, 8vw, 56px);
    font-weight: 800;
    letter-spacing: 1px;
}
.unit {
    font-size: clamp(12px, 3.5vw, 16px);
    opacity: .9;
}
.settings-button {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    border: 1px solid color-mix(in oklab, var(--card-bg) 85%, transparent);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    cursor: pointer;
    z-index: 2;
}
.settings-button img {
    width: 28px;
    height: 28px;
}
.settings-button svg { width: 28px; height: 28px; }
/* share-button kaldırıldı */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(0);
    background-color: #151a24;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: none;
    color: var(--text-color);
}
.popup-title {
    margin-top: 0;
}
.popup-input {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #2a3240;
    width: 100%;
    box-sizing: border-box;
}
.popup-input:focus {
    outline: none;
    border-color: #4aa8ff;
    box-shadow: 0 0 0 3px rgba(74,168,255,.25);
}
.popup-label {
    display: block;
    margin-bottom: 5px;
}
.popup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.popup-button {
    background: linear-gradient(135deg, #4aa8ff, #7ed2ff);
    padding: 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    color: #0b0f17;
    font-weight: 700;
}
.popup-button:hover {
    filter: brightness(1.05);
}
.file-upload-container {
    display: inline-block;
    position: relative;
}

.file-upload-label {
    background: linear-gradient(135deg, #4aa8ff, #7ed2ff);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    margin-left: -5px;
    color: #0b0f17;
    font-weight: 700;
}

#popupBackgroundImage {
    display: none; /* Dosya seçme düğmesini gizler */
}

.file-upload-label:hover {
    filter: brightness(1.05);
}
#countdown {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 0 6px; /* İç boşlukla ufak yuvarlama taşmalarını engelle */
}
#countdown .block {
    flex: 1 1 0;
    max-width: none;
    margin: 0;
    min-width: 0; /* Flex shrink için içerik genişliğini zorlamayı engelle */
    border-radius: 14px;
}
#countdown .count {
    font-size: clamp(16px, 5.2vw, 28px);
}
#countdown .unit {
    font-size: clamp(10px, 2.8vw, 12px);
}
.activation-block {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    color: var(--text-color);
    padding: 12px 14px;
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#cityBlock {
    border-radius: 16px;
    padding: 12px;
    margin: 5px auto;
    width: 100%;
    text-align: center;
    display: none;
    font-weight: 800;
    font-size: clamp(18px, 4.5vw, 22px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

#cityBlock .count {
    font-size: 1.5em;
}

/* Progress bar */
.progress {
    width: 100%;
    max-width: 420px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--card-bg) 85%, transparent);
    margin: 8px auto 0;
}
.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4aa8ff, #7ed2ff);
}

/* Theme tokens */
:root {
    --text-color: #eef2f7;
    --card-bg: #1b2433;
}
.theme-glass {
    --text-color: #eef2f7;
    --card-bg: #1b2433;
    --background-color: #0b0f17;
}
.theme-neumorph {
    --text-color: #0e1320;
    --card-bg: #f1f4f9;
    --background-color: #e8ecf3;
}
.theme-minimal {
    --text-color: #e6e6e6;
    --card-bg: #141414;
    --background-color: #000000;
}

.theme-aurora {
    --text-color: #f0f7ff;
    --card-bg: #0b1530;
    --background-color: #050b1a;
    --gradient: radial-gradient(1200px 600px at 10% 10%, #2dd4bf22, transparent 60%),
                radial-gradient(1000px 800px at 90% 20%, #60a5fa22, transparent 60%),
                radial-gradient(800px 900px at 40% 80%, #a78bfa22, transparent 60%);
}
.theme-sunset {
    --text-color: #fff7f2;
    --card-bg: #2b0f19;
    --background-color: #16060b;
    --gradient: radial-gradient(900px 700px at 20% 20%, #ff8a5b26, transparent 60%),
                radial-gradient(1000px 800px at 80% 30%, #ff3d6820, transparent 60%),
                radial-gradient(800px 1000px at 50% 90%, #ffd1661a, transparent 60%);
}
.theme-oled {
    --text-color: #f5f5f5;
    --card-bg: #0a0a0a;
    --background-color: #000000;
}

/* Theme specific overrides */
.theme-minimal .block,
.theme-minimal .title-block,
.theme-minimal #cityBlock,
.theme-minimal .settings-button,
.theme-minimal .share-button {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.theme-minimal .popup-content {
    background-color: #0b0b0b;
    border: 1px solid rgba(255,255,255,.12);
}
.theme-minimal .popup-button,
.theme-minimal .file-upload-label {
    background: #e6e6e6;
    color: #000;
}
.theme-minimal .progress {
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.theme-minimal .progress-fill {
    background: #e6e6e6;
}

.theme-neumorph .block,
.theme-neumorph .title-block,
.theme-neumorph #cityBlock,
.theme-neumorph .settings-button,
.theme-neumorph .share-button {
    background: #eef2f7;
    border: none;
    box-shadow: 6px 6px 14px #cdd3dd, -6px -6px 14px #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.theme-neumorph .popup-content {
    background: #eef2f7;
    color: #0e1320;
}
.theme-neumorph .popup-button,
.theme-neumorph .file-upload-label {
    background: #0e1320;
    color: #eef2f7;
}
.theme-neumorph .progress {
    background: #dfe5ee;
    box-shadow: inset 6px 6px 12px #cdd3dd, inset -6px -6px 12px #ffffff;
}
.theme-neumorph .progress-fill {
    background: #0e1320;
}

/* Aurora background and accents */
.theme-aurora body,
body.theme-aurora {
    background-image: var(--background-image), var(--gradient);
    background-blend-mode: normal, screen;
}
.theme-aurora .popup-button,
.theme-aurora .file-upload-label {
    background: linear-gradient(135deg, #60a5fa, #34d399);
    color: #081018;
}
.theme-aurora .progress-fill {
    background: linear-gradient(90deg, #60a5fa, #34d399);
}

/* Sunset background and accents */
.theme-sunset body,
body.theme-sunset {
    background-image: var(--background-image), var(--gradient);
    background-blend-mode: normal, screen;
}
.theme-sunset .popup-button,
.theme-sunset .file-upload-label {
    background: linear-gradient(135deg, #ff8a5b, #ff3d68);
    color: #22060b;
    font-weight: 800;
}
.theme-sunset .progress-fill {
    background: linear-gradient(90deg, #ff8a5b, #ff3d68);
}

/* OLED high contrast accents */
.theme-oled .block,
.theme-oled .title-block,
.theme-oled #cityBlock,
.theme-oled .settings-button,
.theme-oled .share-button {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.theme-oled .popup-content {
    background: #050505;
    border: 1px solid rgba(255,255,255,.14);
}
.theme-oled .popup-button,
.theme-oled .file-upload-label {
    background: #ffffff;
    color: #000;
}
.theme-oled .progress {
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.theme-oled .progress-fill {
    background: #ffffff;
}