/* =====================================================================
   cityguide.tr — ortak marka katmanı (web + mobil)
   Yüklenme: TravelGuide.Web/Components/App.razor ve MAUI wwwroot/index.html
   Bootstrap'tan SONRA yüklenmelidir.
   ===================================================================== */

:root {
    --cg-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --cg-primary: var(--cg-turuncu, #F97316);
    --cg-primary-dark: var(--cg-turuncu-koyu, #EA580C);
    --cg-brand: #EF7F1A;            /* logo yazı rengi */
    --cg-ink: #2B2A29;              /* logo kontur rengi */
    --cg-safe-top: env(safe-area-inset-top, 0px);
    --cg-safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* MainLayout Bootstrap'ı gecikmeli (media=print) yeniden yüklüyor; sonradan gelen Bootstrap
   :root değişkenini ezmesin diye seçici bilinçli olarak daha özgül. */
html:root { --bs-body-font-family: var(--cg-font); --bs-font-sans-serif: var(--cg-font); }

/* ── 1) TEK FONT ─────────────────────────────────────────────────────
   Sayfalar kendi <style> bloklarında farklı font yığınları kullanıyordu
   (Page.razor: -apple-system/Segoe UI, diğerleri Bootstrap system-ui).
   Panelde zengin metin editöründen gelen içerikler ise satır içi
   font-family (Arial, Times New Roman, Calibri...) taşıyordu. Hepsi tek
   aileye bağlandı. İkon fontları (Font Awesome / Bootstrap Icons) hariç. */
html body, html button, html input, html select, html textarea, html .btn, html .form-control, html .form-select {
    font-family: var(--cg-font);
}

.cg-icerik, .cg-icerik * {
    font-family: var(--cg-font) !important;
}
.cg-icerik .bi::before, .cg-icerik [class^="bi-"]::before { font-family: "bootstrap-icons" !important; }
.cg-icerik .fa, .cg-icerik .fas, .cg-icerik .fa-solid, .cg-icerik .far, .cg-icerik .fa-regular { font-family: "Font Awesome 6 Free" !important; }
.cg-icerik .fab, .cg-icerik .fa-brands { font-family: "Font Awesome 6 Brands" !important; }

/* Editörden gelen satır içi yazı boyutları (10px, 13.333px, 18pt...) metnin
   ortasında boyut sıçramalarına yol açıyordu; gövde metni tek boyuta çekilir,
   başlıklar kendi hiyerarşisini korur. */
.cg-icerik p, .cg-icerik span, .cg-icerik font, .cg-icerik li, .cg-icerik td, .cg-icerik div:not([class]) {
    font-size: inherit !important;
    line-height: inherit;
}
.cg-icerik h1 { font-size: 1.6rem !important; }
.cg-icerik h2 { font-size: 1.35rem !important; }
.cg-icerik h3 { font-size: 1.15rem !important; }
.cg-icerik h4, .cg-icerik h5, .cg-icerik h6 { font-size: 1.02rem !important; }
.cg-icerik h1, .cg-icerik h2, .cg-icerik h3, .cg-icerik h4 { font-weight: 700; line-height: 1.35; margin: 1.3em 0 .55em; }
.cg-icerik a { color: var(--cg-primary-dark); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.cg-icerik table { max-width: 100%; display: block; overflow-x: auto; }

/* ── 2) GÖRSELLER: KIRPMA YOK + TIKLAYINCA BÜYÜT ────────────────────
   Galeri kutuları object-fit:cover ile doldurulduğu için logolu görsellerin
   (KUAKMER, TÜRSAB vb.) kenarları kesiliyordu. Artık görselin tamamı görünür. */
.cg-icerik img, img.cg-zoom, .cg-zoom-grup img {
    cursor: zoom-in;
    max-width: 100%;
    height: auto;
}

.cg-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(12, 10, 9, .92);
    display: flex; align-items: center; justify-content: center;
    padding: calc(56px + var(--cg-safe-top)) 12px calc(56px + var(--cg-safe-bottom));
    opacity: 0; transition: opacity .18s ease;
    touch-action: pan-y;
}
.cg-lightbox.acik { opacity: 1; }
.cg-lightbox img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 8px; background: var(--cg-yuzey, #fff); box-shadow: 0 10px 40px rgba(0,0,0,.45);
    cursor: zoom-out; user-select: none; -webkit-user-drag: none;
}
.cg-lightbox button {
    position: absolute; border: none; border-radius: 999px; width: 44px; height: 44px;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.15rem;
    display: grid; place-items: center; cursor: pointer;
}
.cg-lightbox button:hover { background: rgba(255,255,255,.26); }
.cg-lightbox .cg-lb-kapat { top: calc(12px + var(--cg-safe-top)); right: 12px; }
.cg-lightbox .cg-lb-onceki { left: 10px; top: 50%; transform: translateY(-50%); }
.cg-lightbox .cg-lb-sonraki { right: 10px; top: 50%; transform: translateY(-50%); }
.cg-lightbox .cg-lb-sayac {
    position: absolute; bottom: calc(16px + var(--cg-safe-bottom)); left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.85); font-size: .85rem; font-family: var(--cg-font);
}
body.cg-lb-kilit { overflow: hidden; }

/* ── 3) MARKA ─────────────────────────────────────────────────────── */
.cg-logo { display: block; height: auto; max-width: 100%; }
.cg-logo-ikon { width: 28px; height: 28px; flex-shrink: 0; }

/* Mobil (MAUI) açılış ekranı — Blazor ilk render'da #app içeriğini değiştirince kendiliğinden kalkar. */
.cg-splash {
    position: fixed; inset: 0; z-index: 5000; background: var(--cg-yuzey, #fff);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.cg-splash img { width: min(62vw, 260px); height: auto; animation: cg-splash-in .6s ease-out both; }
.cg-splash-bar { width: 120px; height: 4px; border-radius: 4px; background: var(--cg-cizgi, #FDE3CC); overflow: hidden; }
.cg-splash-bar::after {
    content: ""; display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--cg-brand);
    animation: cg-splash-bar 1.1s ease-in-out infinite;
}
@keyframes cg-splash-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cg-splash-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* Router "bulunamadı" ekranı */
.cg-bulunamadi {
    min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 14px; padding: 40px 20px; background: var(--cg-krem, #FFF7ED);
}
.cg-bulunamadi h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--cg-yazi, #292524); }
.cg-bulunamadi p { color: var(--cg-yazi-soluk, #78716C); margin: 0; max-width: 420px; }
.cg-btn {
    display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px;
    font-weight: 600; font-size: .9rem; border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
}
.cg-btn-ana { background: var(--cg-primary); color: #fff !important; }
.cg-btn-ana:hover { background: var(--cg-primary-dark); }
.cg-btn-ikincil { background: var(--cg-yuzey, #fff); color: #44403C !important; border-color: #E7E5E4; }
.cg-btn-ikincil:hover { border-color: var(--cg-primary); color: var(--cg-primary-dark) !important; }

/* ── KUŞADASI 105 FM KALICI OYNATICI ─────────────────────────────── */
.cg-radio {
    position: fixed; right: 14px; bottom: calc(14px + var(--cg-safe-bottom)); z-index: 1200;
    display: none; align-items: center; gap: 10px; min-width: 245px;
    padding: 9px 13px 9px 9px; border: 1px solid var(--cg-seftali, #FED7AA); border-radius: 16px;
    background: rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(124,45,18,.22);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cg-radio.is-started { display: flex; }
.cg-radio.is-dismissed { display: none; }
.cg-radio-toggle {
    width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: var(--cg-primary);
    cursor: pointer; box-shadow: 0 3px 10px rgba(249,115,22,.3);
}
.cg-radio-toggle.is-playing { background: #DC2626; }
.cg-radio-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.cg-radio-copy strong { color: var(--cg-kahve, #7C2D12); font-size: .78rem; letter-spacing: .25px; }
.cg-radio-copy span { color: var(--cg-yazi-soluk, #78716C); font-size: .68rem; white-space: nowrap; }
.cg-radio-close { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; color: var(--cg-yazi-soluk, #78716C); background: transparent; cursor: pointer; }
.cg-radio-close:hover { color: var(--cg-kahve, #7C2D12); background: var(--cg-krem, #FFF7ED); }
.cp-alt-radio { border: 0; background: transparent; font: inherit; }
.cp-alt-radio.is-playing .cp-alt-btn-icon { color: #fff; background: #DC2626; border-color: #DC2626; }

@media (max-width: 480px) {
    .cg-radio { right: 9px; bottom: calc(9px + var(--cg-safe-bottom)); min-width: 220px; }
}

/* ── Firma portalı yan menüsü: küçült / büyüt (14.10.2026) ─────────────────
   Davranış cityguide.js'te (cgPortalMenu). Menü öğelerinde metin ayrı bir
   etikette olmadığı için daraltılmış hâlde yazı boyutu 0 yapılır, ikon korunur. */
.portal-yan-menu { transition: width .15s ease; }
.portal-yan-menu .portal-menu-dugme { margin-left: auto; padding: .15rem .45rem; line-height: 1; }

.portal-yan-menu.daralt { width: 60px !important; }
.portal-yan-menu.daralt > .border-bottom { padding: .75rem .4rem !important; justify-content: center; }
.portal-yan-menu.daralt > .border-bottom > i,
.portal-yan-menu.daralt > .border-bottom > span { display: none; }
.portal-yan-menu.daralt .portal-menu-dugme { margin-left: 0; }
.portal-yan-menu.daralt .nav { padding: .5rem !important; }
.portal-yan-menu.daralt .nav-link { font-size: 0; text-align: center; padding: .6rem 0; }
.portal-yan-menu.daralt .nav-link i { font-size: 1rem; margin: 0 !important; }
.portal-yan-menu.daralt > .mt-auto { padding: .5rem !important; }
.portal-yan-menu.daralt > .mt-auto .small { display: none; }
.portal-yan-menu.daralt > .mt-auto .btn { font-size: 0; padding: .45rem 0; }
.portal-yan-menu.daralt > .mt-auto .btn i { font-size: .9rem; margin: 0 !important; }

/* Telefon: varsayılan dar şerit (içerik ezilmez); .acik tam menüyü içeriğin üstünde açar. */
@media (max-width: 767.98px) {
    .portal-yan-menu:not(.acik) { width: 52px !important; }
    .portal-yan-menu:not(.acik) > .border-bottom { padding: .75rem .3rem !important; justify-content: center; }
    .portal-yan-menu:not(.acik) > .border-bottom > i,
    .portal-yan-menu:not(.acik) > .border-bottom > span { display: none; }
    .portal-yan-menu:not(.acik) .portal-menu-dugme { margin-left: 0; }
    .portal-yan-menu:not(.acik) .nav { padding: .4rem !important; }
    .portal-yan-menu:not(.acik) .nav-link { font-size: 0; text-align: center; padding: .6rem 0; }
    .portal-yan-menu:not(.acik) .nav-link i { font-size: 1rem; margin: 0 !important; }
    .portal-yan-menu:not(.acik) > .mt-auto { padding: .4rem !important; }
    .portal-yan-menu:not(.acik) > .mt-auto .small { display: none; }
    .portal-yan-menu:not(.acik) > .mt-auto .btn { font-size: 0; padding: .45rem 0; }
    .portal-yan-menu:not(.acik) > .mt-auto .btn i { font-size: .9rem; margin: 0 !important; }

    .portal-yan-menu.acik {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050;
        width: 240px !important; min-height: 0 !important; overflow-y: auto;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
    }
    .portal-yan-menu.acik + * { margin-left: 52px; }   /* açıkken içerik yerinden kaymasın */
    .portal-yan-menu + .flex-grow-1 { min-width: 0; padding: 1rem !important; }
}

/* ── FAVORİ (kalp) DÜĞMESİ — FavoriDugmesi.razor ─────────────────── */
.cg-favori { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.cg-favori.aktif i { color: #E11D48; }
.cg-favori:active i { transform: scale(1.25); transition: transform .12s; }
.pg-top-bar-favori {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--cg-cizgi-gri, #e2e8f0); background: var(--cg-yuzey, #fff);
    color: var(--cg-yazi-soluk, #78716C); font-size: .9rem;
}