/* ==================================================================
 *  ÇILGIN YAZILIM – ÖN YÜZ (SİTE) KABUK STİLLERİ
 * ------------------------------------------------------------------
 *  Genel tasarım token'ları "cilginyazilim.css" dosyasındadır.
 *  Bu dosya SADECE ziyaretçi sayfalarının KABUĞUNU tanımlar:
 *  üst menü, alt bilgi, giriş/kayıt ekranı, bakım örtüsü.
 *
 *  İÇERİK BÖLÜMLERİ (hero, özellik kartları, iletişim kartları,
 *  metin blokları) "site-sections.css" dosyasındadır. İkisi ayrıdır
 *  ve BİRBİRİNİN KURALINI TEKRAR ETMEZ:
 *
 *    Eskiden .cy-hero, .cy-hero__title, .cy-hero__logo, .cy-prose ve
 *    .cy-section__title hem burada hem orada tanımlıydı. İki dosya
 *    aynı özelliği farklı değerlerle yazınca yükleme sırası kazanıyor,
 *    hangi kuralın geçerli olduğu okunamaz hale geliyordu. En görünür
 *    sonucu şuydu: buradaki
 *        @media (max-width: 767.98px) { .cy-hero__logo { display:none } }
 *    satırı TELEFONDA hero kartındaki logoyu tamamen siliyor, kart
 *    logosuz bir kutu olarak kalıyordu. Tekrarların hepsi kaldırıldı.
 *
 *  Yükleme sırası: bootstrap.min.css → cilginyazilim.css → site.css
 *                  → site-sections.css
 * ================================================================== */

body.cy-site { background: var(--cy-bg); }

/* ------------------------------------------------------------------
 *  ÜST MENÜ
 * ------------------------------------------------------------------
 *  Menü YAPIŞKANDIR (sticky): uzun bir sayfanın ortasındayken başka
 *  bir sayfaya geçmek için en yukarı kaydırmak gerekmez. Telefonda
 *  bu, gezinmenin en çok hissedilen farkıdır.
 * ------------------------------------------------------------------ */
.cy-site-nav {
    position: sticky;
    top: 0;
    z-index: 1035;   /* Sabit WhatsApp düğmesinin (1030) üstünde */
    background: var(--cy-surface);
    border-bottom: 1px solid var(--cy-border);
    padding: .6rem 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Sayfa aşağı kaydırılınca menü hafifçe "kalkar". Sınıfı app.js ekler. */
.cy-site-nav.is-stuck { box-shadow: var(--cy-shadow-sm); }

.cy-site-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: 100%;
    min-height: var(--cy-tap, 44px);
    font-weight: 700;
    color: var(--cy-text);
    text-decoration: none;
}

/* Bootstrap .navbar-brand:hover rengi --bs-emphasis-color'a (siyah) çeker;
 * bizim koyu temamızı bilmez → koyu zeminde yazı kayboluyordu. Rengi
 * sabitleyip hover'ı ikonun hafif kalkmasıyla gösteriyoruz. */
.cy-site-nav .cy-site-nav__brand:hover,
.cy-site-nav .cy-site-nav__brand:focus,
.cy-site-footer .cy-site-nav__brand:hover { color: var(--cy-text); }
.cy-site-nav__brand .cy-logo { transition: transform var(--cy-transition); }
.cy-site-nav__brand:hover .cy-logo { transform: translateY(-1px) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .cy-site-nav__brand:hover .cy-logo { transform: none; } }

/* Logo: satır içi SVG ya da panelden yüklenen görsel (partials/site-logo). */
.cy-site-nav__brand .cy-logo { display: block; width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.cy-logo__from { stop-color: var(--cy-brand-600); }
.cy-logo__to   { stop-color: #6d28d9; }
.cy-site-nav__brand svg.cy-logo { border-radius: 8px; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cy-brand-600) 55%, transparent); }

/* Uzun site adları dar ekranda menü düğmesini ezmesin. */
.cy-site-nav .navbar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cy-site-nav .nav-link {
    color: var(--cy-text-soft);
    font-weight: 500;
    font-size: .875rem;
    border-radius: var(--cy-radius-sm);
}
.cy-site-nav .nav-link:hover  { color: var(--cy-brand); }
.cy-site-nav .nav-link.active { color: var(--cy-brand-600); font-weight: 700; }

.cy-site-nav .navbar-toggler {
    display: inline-grid;
    place-items: center;
    width: var(--cy-tap, 44px);   /* en küçük dokunma hedefi */
    height: var(--cy-tap, 44px);
    padding: 0;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
}
.cy-site-nav .navbar-toggler:focus { box-shadow: var(--cy-focus); }
/* Tema düğmesi ön yüzde de dokunmaya uygun boyutta. */
.cy-site-nav .cy-topbar__toggle { width: var(--cy-tap, 44px); height: var(--cy-tap, 44px); }
.cy-site-nav .navbar-toggler .cy-icon { width: 22px; height: 22px; color: var(--cy-text-soft); }

/* Menü açıkken hamburger simgesi çarpıya döner: açık/kapalı durumu
   simgenin kendisinden okunur. */
.cy-site-nav .navbar-toggler .cy-nav-icon--close { display: none; }
.cy-site-nav .navbar-toggler[aria-expanded="true"] .cy-nav-icon--open  { display: none; }
.cy-site-nav .navbar-toggler[aria-expanded="true"] .cy-nav-icon--close { display: block; }

/* Menünün sağ ucu. Tema düğmesi mobilde de HAMBURGERİN DIŞINDA kalır:
   menüyü açmadan temayı değiştirmek tek dokunuşa iner. */
.cy-site-nav__tools { display: flex; align-items: center; gap: .4rem; }

/* ------------------------------------------------------------------
 *  BAKIM MODU
 * ------------------------------------------------------------------ */
.cy-maintenance {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: 2rem 1.25rem;
}

.cy-maintenance__box { text-align: center; max-width: 32rem; }
.cy-maintenance__box .cy-icon { color: var(--cy-brand-600); margin-bottom: 1rem; }

/* ------------------------------------------------------------------
 *  ALT BİLGİ
 * ------------------------------------------------------------------ */
.cy-site-footer {
    background: var(--cy-surface);
    border-top: 1px solid var(--cy-border);
    padding: 3.5rem 0 1.75rem;
    margin-top: 3rem;
}

/* Geniş oluk yalnızca masaüstünde: telefonda kapsayıcı dolgusunu aşıp
 * yatay kaydırma çubuğu açıyordu. */
.cy-site-footer__cols { row-gap: 2.25rem; }
@media (min-width: 992px) { .cy-site-footer__cols { --bs-gutter-x: 2.5rem; } }

.cy-site-footer__slogan {
    margin: .9rem 0 .35rem;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--cy-text);
}

.cy-site-footer__intro {
    max-width: 34ch;
    margin: 0 0 1.1rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--cy-text-muted);
}

/* Sütun başlıkları: küçük, aralıklı büyük harf + marka rengi kısa çizgi. */
.cy-site-footer__title {
    margin: 0 0 1rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cy-text);
}
.cy-site-footer__title::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    margin-top: .5rem;
    border-radius: 2px;
    background: var(--cy-brand-600);
}

.cy-site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cy-border);
    font-size: .8125rem;
    color: var(--cy-text-muted);
}
.cy-site-footer__bottom > span:nth-child(2) { margin-left: auto; }

.cy-to-top {
    display: inline-grid;
    place-items: center;
    width: var(--cy-tap, 44px);
    height: var(--cy-tap, 44px);
    border: 1px solid var(--cy-border);
    border-radius: 50%;
    background: var(--cy-surface-soft);
    color: var(--cy-text-muted);
    transition: color var(--cy-transition), border-color var(--cy-transition), transform var(--cy-transition);
}
.cy-to-top .cy-icon { transform: rotate(-90deg); }
.cy-to-top:hover { color: var(--cy-brand-text, var(--cy-brand)); border-color: var(--cy-brand-600); transform: translateY(-2px); }
.cy-to-top:focus-visible { outline: 0; box-shadow: var(--cy-focus); }
@media (prefers-reduced-motion: reduce) { .cy-to-top:hover { transform: none; } }

/* ------------------------------------------------------------------
 *  GİRİŞ / KAYIT EKRANI
 * ------------------------------------------------------------------ */
.cy-auth-page {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 280px);
    padding: 3rem 0;
    background:
        radial-gradient(480px 260px at 15% 0%, var(--cy-brand-50), transparent 60%),
        radial-gradient(420px 240px at 100% 100%, var(--cy-brand-100), transparent 55%);
}

.cy-auth-card { box-shadow: var(--cy-shadow-sm); }

.cy-auth-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: var(--cy-radius-lg);
    background: var(--cy-brand-50);
    border: 1px solid var(--cy-brand-100);
}
.cy-auth-card__logo img { width: 40px; height: 40px; object-fit: contain; }

/* --- Demo hesaplarla hızlı giriş --- */
.cy-quick-login { margin-top: 1.5rem; }

.cy-quick-login__divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    color: var(--cy-text-muted);
    font-size: .75rem;
}
.cy-quick-login__divider::before,
.cy-quick-login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cy-border);
}

.cy-quick-login__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}

.cy-quick-login__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-surface);
    text-align: left;
    transition: border-color var(--cy-transition), background-color var(--cy-transition), transform var(--cy-transition);
}
.cy-quick-login__item:hover { border-color: var(--cy-brand-400); background: var(--cy-brand-50); transform: translateY(-1px); }
.cy-quick-login__item:disabled { opacity: .55; pointer-events: none; }

.cy-quick-login__item .cy-icon { flex-shrink: 0; color: var(--cy-text-muted); }
.cy-quick-login__item.is-editor .cy-icon  { color: var(--cy-warning); }
.cy-quick-login__item.is-member .cy-icon  { color: var(--cy-info); }
.cy-quick-login__item.is-passive .cy-icon { color: var(--cy-text-muted); }
.cy-quick-login__item.is-hold .cy-icon    { color: var(--cy-warning); }

.cy-quick-login__text { display: flex; flex-direction: column; min-width: 0; }
.cy-quick-login__text strong { font-size: .8125rem; line-height: 1.25; }
.cy-quick-login__text small { color: var(--cy-text-muted); font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cy-quick-login__hint { margin: .85rem 0 0; color: var(--cy-text-muted); font-size: .6875rem; line-height: 1.5; }
.cy-quick-login__hint code { font-size: .6875rem; }


/* ==================================================================
 *  MOBİL UYUM
 * ------------------------------------------------------------------
 *  Ölçütler panelinkiyle (admin.css) aynıdır; iki yüz arasında gidip
 *  gelen kullanıcı aynı dokunma hissini bulmalı:
 *    - Dokunma hedefi en az 44×44 piksel (Apple/Google önerisi)
 *    - Form alanları 16 piksel — küçüğünde iOS sayfayı yakınlaştırır
 *    - Çentikli ekranlarda güvenli alan payı
 * ================================================================== */

/* --- 992px altı: menü açılır panele döner --- */
@media (max-width: 991.98px) {
    /* Açılan menü, üst çubuğun altına yapışan bir panel gibi durur ve
       KENDİ İÇİNDE kayar: menü bağlantıları panelden eklendiği için
       sayıları bilinmez; on sayfalık bir menü ekranı taşırmamalı. */
    .cy-site-nav .navbar-collapse {
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: .6rem -.25rem -.25rem;
        padding: 0 .25rem .25rem;
        border-top: 1px solid var(--cy-border);
    }

    .cy-site-nav .navbar-nav { gap: .15rem; padding-top: .5rem; }

    /* Parmakla rahat seçilen satırlar. */
    .cy-site-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: .55rem .75rem;
        font-size: .9375rem;
    }
    .cy-site-nav .nav-link.active { background: var(--cy-brand-soft); }

    /* Menüdeki düğmeler (Giriş / Kayıt / Panele Git) tam genişlik. */
    .cy-site-nav .navbar-nav .cy-btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
        margin-top: .35rem;
    }
}

/* --- 768px altı: TELEFON --- */
@media (max-width: 767.98px) {
    /* Dokunma hedefleri */
    .cy-site .cy-btn     { min-height: 44px; padding: .6rem 1.1rem; }
    .cy-site .cy-btn--sm { min-height: 38px; }

    /* Ana sayfadaki eylem düğmeleri tek sütun: yan yana sıkışan üç
       düğmenin hiçbiri parmakla güvenle seçilemiyordu. */
    .cy-hero__actions { flex-direction: column; align-items: stretch; }
    .cy-hero__actions .cy-btn { width: 100%; justify-content: center; }

    .cy-cta__actions { width: 100%; }
    .cy-cta__actions .cy-btn { flex: 1 1 auto; justify-content: center; }

    /* İletişim formunun gönder düğmesi tam genişlik olur ve gizlilik
       notu altına iner: sayfanın tek amacı bu düğmeye basmak. */
    .cy-contact-actions { flex-direction: column; align-items: stretch !important; }
    .cy-contact-actions .cy-btn { width: 100%; justify-content: center; }
    .cy-contact-actions > span { text-align: center; }

    /* iOS ZOOM SORUNU: 16px'ten küçük bir alana dokunulunca Safari
       sayfayı otomatik yakınlaştırır ve düzen bozulur. Panelde de
       aynı kural var (admin.css); ön yüzde admin.css YÜKLENMEDİĞİ
       için burada ayrıca tanımlanmak zorunda. */
    .cy-site .form-control,
    .cy-site .form-select { font-size: 16px; }

    .cy-site-footer { padding: 2rem 0 1.25rem; }

    /* Sabit WhatsApp düğmesi alt bilginin son satırının SAĞ UCUNU
       kapatıyordu ("cilginyazilim.com ile geliştirildi" yazısı düğmenin
       altında kalıyordu). Telefonda satırı sola yaslayıp düğmeye pay
       bırakıyoruz. */
    .cy-site-footer__cols { text-align: center; }
    .cy-site-footer__about { display: flex; flex-direction: column; align-items: center; }
    .cy-site-footer__intro { margin-inline: auto; }
    .cy-site-footer .cy-social,
    .cy-footer-list--icons li { justify-content: center; }
    .cy-footer-list { align-items: center; }

    .cy-site-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
    /* Sabit WhatsApp düğmesi son satırı kapatmasın (yalnızca düğme varsa). */
    body:has(.cy-whatsapp-fab) .cy-site-footer__bottom { padding-bottom: 4rem; }
    .cy-site-footer__title::after { margin-inline: auto; }
    .cy-site-footer__bottom > span:nth-child(2) { margin-left: 0; }
    .cy-social__link { width: var(--cy-tap, 44px); height: var(--cy-tap, 44px); }

    .cy-auth-page   { padding: 2rem 0; min-height: 0; }
    .cy-quick-login__grid { grid-template-columns: 1fr; }

    /* Bildirimler üstte ve tam genişlikte — panelle aynı davranış. */
    .cy-site .cy-toast-container { left: .5rem; right: .5rem; top: .5rem; }
    .cy-site .cy-toast { max-width: none; width: 100%; }
}

/* --- 400px altı: çok dar telefonlar --- */
@media (max-width: 399.98px) {
    .cy-site-nav__brand span { font-size: .9375rem; }
    .cy-site-nav__brand .cy-logo { width: 30px; height: 30px; }
}

/* --- Çentikli ekranlar (iPhone) için güvenli alan --- */
@supports (padding: max(0px)) {
    .cy-site-footer { padding-bottom: max(1.75rem, env(safe-area-inset-bottom)); }
}