/*
 * YourGold tanitim sitesi.
 *
 * Palet uygulamanin KOYU temasindan alinmistir
 * (apps/mobile/src/theme/dark.ts) — site ve uygulama ayni kimligi tasir.
 *
 * Tek dosya, on islemci yok, framework yok (docs/WEBSITE.md §5).
 */

/*
 * TEMA TOKENLARI - iki palet de uygulamadan gelir:
 *   koyu  -> apps/mobile/src/theme/dark.ts
 *   acik  -> apps/mobile/src/theme/light.ts
 *
 * Varsayilan KOYU'dur (PRODUCT.md: uygulama dark mode ile baslar).
 * `theme.js` ilk boyamadan once `data-theme` yazar; kayitli secim yoksa
 * isletim sistemi tercihini kullanir.
 *
 * ⚠ ACIK PALET IKI YERDE TANIMLIDIR ve ikisi BIRLIKTE guncellenir:
 *   1) :root[data-theme='light']            -> kullanici secimi (JS ile)
 *   2) @media (prefers-color-scheme: light) -> JavaScript CALISMIYORSA
 * Ikincisi olmasa, JS'i kapali bir kullanici acik temaya hic gecemezdi.
 */

:root {
    color-scheme: dark;

    --bg: #0a0b0e;
    --surface: #13151a;
    --surface-alt: #1e2029;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text: #e8e9eb;
    --text-soft: #d6d9e0;
    --muted: #868a97;

    --accent: #c9a84c;
    --accent-strong: #e4c368;
    --on-accent: #0a0b0e;

    --warn: #f5a524;

    --header-bg: rgba(10, 11, 14, 0.9);
    --hero-glow: rgba(201, 168, 76, 0.11);
    --mark-from: #e4c368;
    --mark-to: #9c7f33;

    --wrap: 1080px;
    --radius: 14px;

    --sans:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
        sans-serif;
}

/* 1) Kullanici secimi. */
:root[data-theme='light'] {
    color-scheme: light;

    --bg: #f7f5f0;
    --surface: #ffffff;
    --surface-alt: #efebe2;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.2);

    --text: #16181d;
    --text-soft: #4a4f5c;
    --muted: #5f6472;

    --accent: #7c620f;
    --accent-strong: #5f4b0b;
    --on-accent: #ffffff;

    --warn: #8a5200;

    --header-bg: rgba(247, 245, 240, 0.9);
    --hero-glow: rgba(124, 98, 15, 0.09);
    --mark-from: #c9a84c;
    --mark-to: #7c620f;
}

/* 2) JavaScript calismiyorsa sistem tercihi. Degerler yukaridakiyle AYNI. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        --bg: #f7f5f0;
        --surface: #ffffff;
        --surface-alt: #efebe2;
        --border: rgba(0, 0, 0, 0.08);
        --border-strong: rgba(0, 0, 0, 0.2);

        --text: #16181d;
        --text-soft: #4a4f5c;
        --muted: #5f6472;

        --accent: #7c620f;
        --accent-strong: #5f4b0b;
        --on-accent: #ffffff;

        --warn: #8a5200;

        --header-bg: rgba(247, 245, 240, 0.9);
        --hero-glow: rgba(124, 98, 15, 0.09);
        --mark-from: #c9a84c;
        --mark-to: #7c620f;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/*
 * Guvenlik agi: hicbir gorsel kapsayicisindan TASMASIN. Tek bir tasan oge
 * tum sayfaya yatay kaydirma cubugu ekler ve bu, kucuk ekranda en sik
 * karsilasilan bozulmadir.
 */
img {
    max-width: 100%;
}

/* Uzun e-posta/URL gibi bolunemeyen sozcukler dar sutunu tasirmasin. */
p,
li,
figcaption {
    overflow-wrap: anywhere;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--accent-strong);
}

/* Klavye kullanicisi icin gorunur odak — her yerde. */
a:focus-visible,
.skip:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: var(--on-accent);
    padding: 10px 16px;
    z-index: 10;
    font-weight: 600;
    text-decoration: none;
}

.skip:focus {
    left: 12px;
    top: 12px;
}

/* ───────────────────────────────────────────────────────────── baslik ── */

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--header-bg);
    backdrop-filter: saturate(150%) blur(10px);
    position: sticky;
    top: 0;
    z-index: 5;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    flex-wrap: wrap;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
}

/*
 * Uygulamanin GERCEK ikonu - magazadakiyle ayni dosyadan uretilir
 * (build.mjs 160 piksele kucultur). Onceden burada CSS ile cizilmis altin
 * bir disk vardi; gercek ikon hem taniniyor hem de magaza listelemesiyle
 * tutarli oluyor.
 *
 * Yuvarlatma iOS'un koseleme oranina yakin tutuldu: kenarin ~%22'si.
 */
.wordmark-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex: none;
    display: block;
}

/* Hero'daki buyuk ikon - sayfanin ilk gorseli. */
.hero-icon {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 19px;
    margin: 0 0 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 15px;
}

.site-nav a {
    color: var(--text-soft);
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--accent-strong);
}

.site-nav a[aria-current='page'] {
    color: var(--accent);
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 3px;
    font-size: 13px;
    font-weight: 600;
}

.lang-current,
.lang-link {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    line-height: 1.4;
}

.lang-current {
    background: var(--accent);
    color: var(--on-accent);
}

.lang-link {
    color: var(--muted);
    text-decoration: none;
}

.lang-link:hover {
    color: var(--text);
}

/* Tema dugmesi - dil anahtariyla ayni yuksekligi paylasir. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    flex: none;
}

.theme-toggle:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
    display: block;
}

/*
 * Tiklandiginda GECILECEK temanin simgesi gosterilir: koyu temada gunes.
 * `data-theme` yokken (JavaScript calismadi) varsayilan koyudur.
 */
.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

:root[data-theme='light'] .theme-toggle .icon-sun {
    display: none;
}

:root[data-theme='light'] .theme-toggle .icon-moon {
    display: block;
}

/* ─────────────────────────────────────────────────────────────── hero ── */

.hero {
    padding: 72px 0 56px;
    border-bottom: 1px solid var(--border);
    background: radial-gradient(120% 100% at 50% 0%, var(--hero-glow), transparent 62%);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 7vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.lead {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(18px, 2.2vw, 21px);
    color: var(--text-soft);
}

/*
 * ROZET — 1. asama yer tutucu (docs/WEBSITE.md §3.10).
 * Apple artwork'u DEGILDIR ve olmamalidir: resmi rozet yalnizca uygulama
 * yayinlandiktan sonra, degistirilmeden ve urun sayfasina baglanarak konur.
 */
.badge-placeholder {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin: 30px 0 0;
    padding: 12px 22px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.badge-text {
    font-weight: 600;
    font-size: 16px;
}

.badge-note {
    color: var(--muted);
    font-size: 13px;
}

/* ─────────────────────────────────────────────────────────── bolumler ── */

.section {
    padding: 56px 0;
}

.section + .section {
    border-top: 1px solid var(--border);
}

h2 {
    margin: 0 0 22px;
    font-size: clamp(24px, 3.4vw, 31px);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3 {
    margin: 0 0 8px;
    font-size: 18px;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 16px;
}

.section p:last-child {
    margin-bottom: 0;
}

.text-link {
    font-weight: 600;
}

/* Kartlar */

.cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 15.5px;
}

/* Uyari kutulari */

.notice {
    margin: 26px 0 0;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.notice h2,
.notice h3 {
    margin-top: 0;
}

.notice p {
    color: var(--text-soft);
    font-size: 15.5px;
}

.notice p:last-child {
    margin-bottom: 0;
}

/* Yatirim tavsiyesi uyarisi — sayfanin en gorunur uyarisi olmalidir. */
.notice-warn {
    margin: 0;
    border-left: 3px solid var(--warn);
}

.notice-warn h2 {
    font-size: 21px;
    color: var(--warn);
}

/* Ekran goruntuleri */

/*
 * YATAY KAYDIRICI.
 *
 * Kaydirma islevi JavaScript'e BAGLI DEGILDIR: `overflow-x: auto` sayesinde
 * dokunmatikte parmakla, masaustunde kaydirma cubugu ve klavye ile gezilir.
 * Ok dugmeleri yalnizca kolaylik; `gallery.js` calismazsa GORUNMEZLER
 * (bkz. `.gallery-nav`), cunku islevsiz bir dugme hic olmamasindan kotudur.
 */
.gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 22px;
}

.gallery-head h2 {
    margin: 0;
}

/* Dugmeler JS calisana kadar gizli. */
.gallery-nav {
    display: none;
    gap: 8px;
    flex: none;
}

.has-gallery-nav .gallery-nav {
    display: flex;
}

.gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
}

.gallery-btn:hover:not(:disabled) {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.gallery-btn:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.gallery-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.gallery-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.gallery {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Odak halkasi ve golge kirpilmasin. */
    padding: 4px 4px 14px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.gallery:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.gallery .shot {
    flex: 0 0 auto;
    width: 215px;
    scroll-snap-align: start;
}

.shot {
    margin: 0;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
}

.shot figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

/* ───────────────────────────────────────────────── yasal / duz metin ── */

.prose .wrap {
    max-width: 760px;
}

/*
 * AKIS BOSLUKLARI - iki blok birbirine yapismasin.
 *
 * Ikisi de ayni sebepten yapisiyordu: ustteki ogenin ALT bosluğu sifirdi,
 * alttakinin UST bosluğu da yoktu, dolayisiyla aralarinda hic bosluk kalmiyordu.
 *   .lead   -> .contact-line   ("Mesajlarinizi okuyorum..." + iletisim kutusu)
 *   .notice -> .legal-block    (ekran goruntusu kutusu + "Verileriniz hakkinda")
 * Kurallar `.prose` ile sinirlidir: ana sayfada `.notice` bolumun SON ogesidir
 * ve orada alt bosluk fazladan yer acardi.
 */
.prose .lead {
    margin-bottom: 30px;
}

.prose .notice {
    margin-bottom: 36px;
}

.prose h1 {
    margin: 0 0 6px;
    font-size: clamp(30px, 5vw, 40px);
    letter-spacing: -0.02em;
}

.updated {
    margin: 0 0 34px;
    color: var(--muted);
    font-size: 14px;
}

.legal-block {
    margin-bottom: 26px;
}

.legal-block h2 {
    margin-bottom: 8px;
    font-size: 19px;
}

.legal-block p,
.legal-block li {
    color: var(--text-soft);
    font-size: 16px;
}

.legal-block ul {
    margin: 0;
    padding-left: 22px;
}

.legal-block li {
    margin-bottom: 6px;
}

.contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 30px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.contact-label {
    color: var(--muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.contact-email {
    font-size: 18px;
    font-weight: 600;
    word-break: break-all;
}

/* ───────────────────────────────────────────────────────────── pop-up ── */

/*
 * Native <dialog>: Esc, odak hapsi ve `::backdrop` tarayicidan gelir.
 * `dialog` varsayilan olarak `display: none`; ACIKKEN gorunur, bu yuzden
 * yerlesim kurallari `[open]` uzerinden verilir.
 */
.modal {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    /* Tasma yerine kucul: kucuk ekranda pop-up ekrandan sarkmasin. */
    max-width: min(92vw, 760px);
    max-height: 90vh;
    overflow: hidden;
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
}

.modal-close:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.modal-close:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.modal-close svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* --- buyutulmus ekran goruntusu --- */

.modal-image[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
}

.modal-image .modal-close {
    align-self: flex-end;
}

.modal-image img {
    display: block;
    /* Telefon goruntusu YUKSEKLIKLE sinirlidir; genislik ondan turer. */
    max-height: calc(90vh - 130px);
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--border-strong);
}

.modal-caption {
    margin: 0;
    color: var(--text-soft);
    font-size: 14.5px;
    text-align: center;
    max-width: 42ch;
}

/* --- gizlilik metni --- */

.modal-text[open] {
    display: flex;
    flex-direction: column;
    width: min(92vw, 720px);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}

.modal-head h2 {
    margin: 0;
    font-size: 21px;
}

/* Uzun metin YALNIZCA burada kayar; pop-up'in kendisi kaymaz. */
.modal-body {
    overflow-y: auto;
    padding: 22px;
    /* Baslik ve alt bilgi disinda kalan yer. */
    max-height: calc(90vh - 150px);
    overscroll-behavior: contain;
}

.modal-body .updated {
    margin-top: 0;
    margin-bottom: 24px;
}

.modal-body .legal-block h3 {
    margin-bottom: 6px;
    font-size: 17px;
}

.modal-foot {
    margin: 0;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    font-size: 15px;
}

/* Tiklanabilir ekran goruntusu. */
.shot-link {
    display: block;
    border-radius: 20px;
    cursor: zoom-in;
}

.shot-link:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────── alt bilgi ── */

.site-footer {
    padding: 34px 0 46px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer-legal {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
    max-width: 68ch;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
    font-size: 15px;
}

.footer-nav a {
    color: var(--text-soft);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--accent-strong);
}

.footer-meta {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

/* ─────────────────────────────────────────────────────────── kucuk ekran ── */

/*
 * ─────────────────────────────────────────────────── DUYARLI YERLESIM ──
 *
 * Kirilma noktalari cihaz adlarina gore degil, YERLESIMIN bozuldugu yere
 * gore secildi:
 *
 *   <= 900 px  ust menu sikismaya baslar (3 baglanti + dil + tema)
 *   <= 620 px  tek sutun; menu kendi satirina iner
 *   <= 380 px  en dar telefonlar (iPhone SE 375, kucuk Android 360)
 *   yatay      alcak ekranda pop-up yuksekligi yeniden hesaplanir
 *
 * Genel yerlesim zaten akiskan: `.cards` auto-fit, `.gallery` yatay kaydirma,
 * baslıklar `clamp()`. Tablet araligi (620-900) icin ayri kural gerekmiyor —
 * iki sutunlu kart izgarasi orada dogal olarak olusuyor.
 */

@media (max-width: 900px) {
    .site-nav {
        gap: 16px;
        font-size: 14.5px;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 16px;
    }

    .header-row {
        min-height: 58px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Menu kendi satirina iner ve sigmazsa SARAR - tasma yerine ikinci satir. */
    .site-nav {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px 14px;
        font-size: 14px;
    }

    .hero {
        padding: 48px 0 40px;
    }

    .section {
        padding: 42px 0;
    }

    /* Bir sonraki gorselin kenari gorunsun: kaydirilabildigi anlasilsin. */
    .gallery .shot {
        width: 62vw;
        max-width: 240px;
    }

    .gallery {
        gap: 14px;
    }

    .hero-icon {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .modal-head,
    .modal-foot {
        padding: 14px 16px;
    }

    .modal-body {
        padding: 16px;
    }
}

@media (max-width: 380px) {
    .wrap {
        padding: 0 16px;
    }

    .site-nav {
        gap: 8px 12px;
        font-size: 13.5px;
    }

    .lang-current,
    .lang-link {
        padding: 3px 9px;
    }

    .gallery .shot {
        width: 72vw;
    }
}

/*
 * Alcak ve genis ekran (telefon yatay). Pop-up yuksekligi `90vh`ten turedigi
 * icin burada gorsele kalan yer cok azalir; cerceveyi inceltip gorsele yer
 * acariz, yoksa buyutulmus goruntu kucucuk kalir.
 */
@media (max-height: 560px) and (orientation: landscape) {
    .modal-image[open] {
        padding: 10px;
        gap: 8px;
    }

    .modal-image img {
        max-height: calc(94vh - 84px);
    }

    .modal-caption {
        display: none;
    }

    .modal-body {
        max-height: calc(94vh - 120px);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}