/* =========================================================================
   Maya Cafe · Müşteri Takip — Tasarım Sistemi
   Mobil öncelikli (mobile-first). Tüm ekranlar bu değişkenleri kullanır.
   ========================================================================= */

:root {
    /* Marka renkleri — sıcak kahve tonları */
    --kahve-950: #1B120C;
    --kahve-900: #2A1D14;
    --kahve-800: #3A2819;
    --kahve-700: #4A3423;
    --amber-600: #C07C1E;
    --amber-500: #D9942B;
    --amber-400: #E8AC4F;
    --krem-50: #FBF7F1;
    --krem-100: #F4ECE1;
    --krem-200: #E7DACA;

    /* Anlamsal renkler */
    --zemin: var(--krem-50);
    --yuzey: #FFFFFF;
    --yuzey-2: var(--krem-100);
    --kenar: #E4D9CB;
    --metin: #2C231B;
    --metin-soluk: #7A6A5A;
    --marka: var(--amber-600);
    --marka-koyu: #A2651A;
    --basari: #2F855A;
    --hata: #C0392B;
    --uyari: #B7791F;

    /* Ölçüler */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-full: 999px;
    --dokunma: 48px; /* minimum dokunma hedefi */

    --golge-sm: 0 1px 2px rgba(43, 30, 20, .06), 0 1px 3px rgba(43, 30, 20, .08);
    --golge-md: 0 4px 12px rgba(43, 30, 20, .08), 0 2px 4px rgba(43, 30, 20, .06);
    --golge-lg: 0 18px 40px rgba(27, 18, 12, .28);

    --gecis: 160ms cubic-bezier(.4, 0, .2, 1);

    /* iOS güvenli alan (çentik / alt çubuk) */
    --safe-ust: env(safe-area-inset-top, 0px);
    --safe-alt: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--zemin);
    color: var(--metin);
    font-family: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Odak görünürlüğü — erişilebilirlik */
:focus-visible {
    outline: 3px solid var(--amber-400);
    outline-offset: 2px;
}

/* =========================================================================
   GİRİŞ EKRANI
   ========================================================================= */

.giris-sayfa {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(24px + var(--safe-ust)) 20px calc(24px + var(--safe-alt));
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(217, 148, 43, .28) 0%, transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(192, 124, 30, .18) 0%, transparent 55%),
        linear-gradient(165deg, var(--kahve-900) 0%, var(--kahve-950) 100%);
}

.giris-kutu {
    width: 100%;
    max-width: 400px;
}

/* --- Marka başlığı --- */
.giris-marka {
    text-align: center;
    margin-bottom: 28px;
}

.giris-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(145deg, var(--amber-400), var(--amber-600));
    box-shadow: 0 10px 30px rgba(217, 148, 43, .35);
}

.giris-logo svg {
    width: 40px;
    height: 40px;
    color: var(--kahve-950);
}

.giris-marka h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--krem-50);
}

.giris-marka p {
    margin: 6px 0 0;
    font-size: .95rem;
    color: rgba(244, 236, 225, .62);
}

/* --- Kart --- */
.giris-kart {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(244, 236, 225, .12);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    box-shadow: var(--golge-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Form alanları (kayan etiketli) --- */
.alan {
    position: relative;
    margin-bottom: 14px;
}

.alan input {
    width: 100%;
    height: 58px;
    padding: 22px 14px 6px;
    font-size: 16px; /* 16px altı iOS'ta otomatik yakınlaştırma yapar */
    font-family: inherit;
    color: var(--krem-50);
    background: rgba(27, 18, 12, .35);
    border: 1.5px solid rgba(244, 236, 225, .16);
    border-radius: var(--r-md);
    transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
    appearance: none;
}

.alan input::placeholder { color: transparent; }

.alan input:hover { border-color: rgba(244, 236, 225, .28); }

.alan input:focus {
    outline: none;
    border-color: var(--amber-500);
    background: rgba(27, 18, 12, .55);
    box-shadow: 0 0 0 4px rgba(217, 148, 43, .15);
}

.alan label {
    position: absolute;
    left: 15px;
    top: 18px;
    font-size: 1rem;
    color: rgba(244, 236, 225, .5);
    pointer-events: none;
    transition: transform var(--gecis), font-size var(--gecis), color var(--gecis);
    transform-origin: left top;
}

.alan input:focus + label,
.alan input:not(:placeholder-shown) + label {
    transform: translateY(-11px);
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--amber-400);
}

.alan.sifre input { padding-right: 54px; }

/* Şifre göster / gizle */
.sifre-goster {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    color: rgba(244, 236, 225, .55);
    cursor: pointer;
    transition: color var(--gecis);
}

.sifre-goster:hover { color: var(--amber-400); }
.sifre-goster svg { width: 22px; height: 22px; }

/* --- Onay kutusu --- */
.onay {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--dokunma);
    margin: 2px 0 16px;
    color: rgba(244, 236, 225, .78);
    font-size: .92rem;
    cursor: pointer;
    user-select: none;
}

.onay input {
    width: 22px;
    height: 22px;
    accent-color: var(--amber-500);
    cursor: pointer;
    flex: none;
}

/* --- Düğme --- */
.dugme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kahve-950);
    background: linear-gradient(145deg, var(--amber-400), var(--amber-600));
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: transform var(--gecis), filter var(--gecis);
    box-shadow: 0 6px 18px rgba(217, 148, 43, .3);
}

.dugme:hover { filter: brightness(1.06); }
.dugme:active { transform: translateY(1px) scale(.995); }

.dugme[disabled] { opacity: .65; cursor: progress; filter: none; }

.dugme svg { width: 20px; height: 20px; }

/* Yükleniyor animasyonu */
.donuyor {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(27, 18, 12, .3);
    border-top-color: var(--kahve-950);
    border-radius: 50%;
    animation: don .7s linear infinite;
}

@keyframes don { to { transform: rotate(360deg); } }

/* =========================================================================
   TAM EKRAN UYARI (hatalı giriş)
   Görünür → 1 sn bekler → kendiliğinden kaybolur. JavaScript kapalı olsa
   bile animasyon zinciri çalışır.
   ========================================================================= */

.tam-uyari {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(23, 12, 9, .78);
    backdrop-filter: blur(14px) saturate(.9);
    -webkit-backdrop-filter: blur(14px) saturate(.9);
    cursor: pointer;
    animation:
        tuZeminGir .22s cubic-bezier(.4, 0, .2, 1) both,
        tuZeminCik .32s cubic-bezier(.4, 0, 1, 1) 1.22s both;
}

@keyframes tuZeminGir {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tuZeminCik {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.tam-uyari-icerik {
    text-align: center;
    max-width: 340px;
    animation:
        tuKartGir .34s cubic-bezier(.34, 1.56, .64, 1) .04s both,
        tuKartCik .3s cubic-bezier(.4, 0, 1, 1) 1.22s both;
}

@keyframes tuKartGir {
    from { opacity: 0; transform: scale(.82) translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes tuKartCik {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(.94) translateY(-10px); }
}

/* --- Çizilen hata ikonu --- */
.tam-uyari-ikon {
    width: 104px;
    height: 104px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(192, 57, 43, .16);
    box-shadow: 0 0 0 0 rgba(192, 57, 43, .5);
    animation: tuNabiz 1s cubic-bezier(.4, 0, .2, 1) .1s;
}

@keyframes tuNabiz {
    0% { box-shadow: 0 0 0 0 rgba(224, 82, 66, .55); }
    100% { box-shadow: 0 0 0 26px rgba(224, 82, 66, 0); }
}

.tam-uyari-ikon svg {
    width: 66px;
    height: 66px;
    fill: none;
    stroke: #FF7B68;
    stroke-width: 3.2;
    stroke-linecap: round;
}

.tu-halka {
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: tuCiz .42s cubic-bezier(.65, 0, .35, 1) .06s forwards;
}

.tu-cizgi {
    stroke-dasharray: 23;
    stroke-dashoffset: 23;
}

.tu-cizgi-1 { animation: tuCiz .2s cubic-bezier(.65, 0, .35, 1) .38s forwards; }
.tu-cizgi-2 { animation: tuCiz .2s cubic-bezier(.65, 0, .35, 1) .5s forwards; }

@keyframes tuCiz {
    to { stroke-dashoffset: 0; }
}

.tam-uyari-baslik {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--krem-50);
}

.tam-uyari-metin {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(244, 236, 225, .72);
}

/* --- Uyarı kutuları (satır içi) --- */
.uyari-kutu {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--r-md);
    font-size: .92rem;
    line-height: 1.45;
}

.uyari-kutu svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.uyari-kutu.hata {
    background: rgba(192, 57, 43, .16);
    border: 1px solid rgba(230, 105, 90, .4);
    color: #FFC9C1;
}

/* Alan bazlı doğrulama mesajı */
.alan-hata {
    display: block;
    margin: -8px 0 12px 4px;
    font-size: .82rem;
    color: #FFB4A8;
}

.alan-hata:empty { display: none; }

/* --- Alt bilgi --- */
.giris-alt {
    margin-top: 22px;
    text-align: center;
    font-size: .82rem;
    color: rgba(244, 236, 225, .38);
}

.giris-alt strong { color: rgba(244, 236, 225, .6); font-weight: 600; }

/* =========================================================================
   UYGULAMA KABUĞU (giriş sonrası ekranlar)
   ========================================================================= */

.uyg-ust {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px + var(--safe-ust)) 16px 12px;
    background: linear-gradient(160deg, var(--kahve-800), var(--kahve-900));
    color: var(--krem-50);
    box-shadow: var(--golge-md);
}

.uyg-ust h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uyg-ust .rozet {
    font-size: .78rem;
    color: rgba(244, 236, 225, .6);
}

.ikon-dugme {
    display: grid;
    place-items: center;
    width: var(--dokunma);
    height: var(--dokunma);
    flex: none;
    background: rgba(255, 255, 255, .08);
    border: 0;
    border-radius: var(--r-md);
    color: inherit;
    cursor: pointer;
    transition: background var(--gecis);
}

.ikon-dugme:hover { background: rgba(255, 255, 255, .16); }
.ikon-dugme svg { width: 22px; height: 22px; }

/* Kabuk dikey akış: gövde kalan yüksekliği kaplar */
body.uyg-kabuk {
    display: flex;
    flex-direction: column;
}

.uyg-govde {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px calc(24px + var(--safe-alt));
}

/* İçeriği dikey olarak ekranın ortasına yerleştirir */
.uyg-govde.orta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kart {
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--golge-sm);
}

/* =========================================================================
   ANA MENÜ — kutu şeklinde menüler
   ========================================================================= */

.karsilama {
    text-align: center;
    margin-bottom: 26px;
}

.karsilama h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--metin);
}

.karsilama p {
    margin: 6px 0 0;
    font-size: .95rem;
    color: var(--metin-soluk);
}

/* --- Izgara: telefonda 2x2, geniş ekranda 4 sütun --- */
.menu-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    /* auto-fit: kutu sayısı arttıkça sütun sayısı kendiliğinden ayarlanır,
       her yeni menü için bu değeri güncellemek gerekmez. 190px eşiği, gövdenin
       720px'lik iç genişliğinde üç sütun verir — altı kutu iki dolu satır olur. */
    .menu-izgara {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 18px;
    }
}

/* Telefonda tek kalan son kutu satırı boş bırakmasın, genişleyip tamamlasın */
@media (max-width: 639px) {
    .menu-izgara > .menu-kutu:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        min-height: 118px;
    }
}

/* --- Kutu --- */
.menu-kutu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 152px;
    padding: 20px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--metin);
    background: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--r-lg);
    box-shadow: var(--golge-sm);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);

    /* Sırayla belirme animasyonu */
    animation: kutuGir .4s cubic-bezier(.34, 1.2, .64, 1) both;
    animation-delay: calc(var(--sira, 0) * 70ms);
}

@keyframes kutuGir {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* Üst kenarda ince renkli şerit */
.menu-kutu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--vurgu);
    opacity: .85;
}

.menu-kutu:hover {
    transform: translateY(-3px);
    border-color: var(--vurgu-kenar);
    box-shadow: var(--golge-md);
}

.menu-kutu:active {
    transform: translateY(0) scale(.975);
    box-shadow: var(--golge-sm);
}

/* --- İkon --- */
.menu-ikon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 18px;
    color: var(--vurgu);
    background: var(--vurgu-soluk);
    transition: transform var(--gecis);
}

.menu-kutu:hover .menu-ikon { transform: scale(1.06); }

.menu-ikon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Yazılar --- */
.menu-ad {
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.menu-aciklama {
    margin-top: -6px;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--metin-soluk);
}

/* --- Kutu renkleri --- */
.menu-kutu.cari   { --vurgu: #C07C1E; --vurgu-soluk: #F7EEDF; --vurgu-kenar: #E0BE86; }
.menu-kutu.gelir  { --vurgu: #2F855A; --vurgu-soluk: #E4F1EA; --vurgu-kenar: #A2CDB6; }
.menu-kutu.masraf { --vurgu: #B03A2E; --vurgu-soluk: #FAEAE6; --vurgu-kenar: #E2A99F; }
.menu-kutu.tanim  { --vurgu: #6B46A8; --vurgu-soluk: #EEE8F7; --vurgu-kenar: #BFACDD; }
.menu-kutu.rapor { --vurgu: #2B6CB0; --vurgu-soluk: #E4EDF7; --vurgu-kenar: #9EBCDD; }
.menu-kutu.ayar  { --vurgu: #6B5B4B; --vurgu-soluk: #EFEAE4; --vurgu-kenar: #BCAF9F; }

/* =========================================================================
   BOŞ / HAZIRLANIYOR DURUMU
   ========================================================================= */

.bos-durum {
    text-align: center;
    padding: 40px 20px;
    color: var(--metin-soluk);
}

.bos-durum svg {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    fill: none;
    stroke: var(--kenar);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bos-durum h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--metin);
}

.bos-durum p { margin: 0; font-size: .92rem; }

/* =========================================================================
   ÇIKIŞ ONAYI — tam ekran
   Üst çubuktaki çıkış düğmesi bunu açar. Giriş ekranının sıcak koyu zeminini
   tekrarlar: kullanıcı "uygulamadan ayrılıyorum" hissini görselden de alır.
   JavaScript kapalıysa katman hiç açılmaz, form doğrudan çıkışı yapar.
   ========================================================================= */

body.modal-acik { overflow: hidden; }

.cikis-katman {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: calc(28px + var(--safe-ust)) 22px calc(28px + var(--safe-alt));
}

.cikis-katman[hidden] { display: none; }

.cikis-zemin {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background:
        radial-gradient(125% 80% at 50% -5%, rgba(217, 148, 43, .26) 0%, transparent 62%),
        radial-gradient(90% 60% at 100% 100%, rgba(192, 124, 30, .16) 0%, transparent 55%),
        linear-gradient(165deg, rgba(42, 29, 20, .93) 0%, rgba(20, 13, 9, .96) 100%);
    backdrop-filter: blur(14px) saturate(.9);
    -webkit-backdrop-filter: blur(14px) saturate(.9);
    animation: cikisZeminGir .24s ease-out both;
}

@keyframes cikisZeminGir {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cikis-kutu {
    position: relative;
    width: 100%;
    max-width: 380px;
    text-align: center;
    animation: cikisKutuGir .34s cubic-bezier(.34, 1.4, .64, 1) .04s both;
}

@keyframes cikisKutuGir {
    from { opacity: 0; transform: scale(.9) translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* --- Avatar --- */
.cikis-avatar {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--amber-400), var(--amber-600));
    box-shadow: 0 12px 34px rgba(217, 148, 43, .34);
    animation: cikisNabiz 1.1s cubic-bezier(.4, 0, .2, 1) .18s;
}

@keyframes cikisNabiz {
    0% { box-shadow: 0 12px 34px rgba(217, 148, 43, .34), 0 0 0 0 rgba(232, 172, 79, .5); }
    100% { box-shadow: 0 12px 34px rgba(217, 148, 43, .34), 0 0 0 24px rgba(232, 172, 79, 0); }
}

.cikis-harf {
    font-size: 2.4rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--kahve-950);
}

/* Avatarın köşesindeki küçük çıkış nişanı */
.cikis-nisan {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kahve-900);
    border: 2.5px solid rgba(244, 236, 225, .9);
}

.cikis-nisan svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #FF9B87;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Yazılar --- */
.cikis-ad {
    margin: 0 0 4px;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amber-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cikis-baslik {
    margin: 0 0 10px;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--krem-50);
}

.cikis-metin {
    margin: 0 auto 26px;
    max-width: 320px;
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(244, 236, 225, .64);
}

/* --- Düğmeler --- */
.cikis-eylem {
    display: grid;
    gap: 10px;
}

.dugme.cikis-onayla {
    color: #FFF3F0;
    background: linear-gradient(145deg, #D9503F, #B03020);
    box-shadow: 0 8px 22px rgba(192, 57, 43, .38);
}

.dugme.cikis-onayla svg {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.dugme.cikis-vazgec {
    color: rgba(244, 236, 225, .82);
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid rgba(244, 236, 225, .2);
    box-shadow: none;
}

.dugme.cikis-vazgec:hover {
    filter: none;
    color: var(--krem-50);
    background: rgba(255, 255, 255, .13);
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}