/* ============================================
   style.css — Tüm sayfalarda yüklenir (main)
   - Tema değişkenleri, reset, top-bar, navbar (drawer + mega akordeon)
   - Buton, section utilities, page-hero, breadcrumb
   - Kitap kartı, sınıf filtre grid (paylaşılan)
   - Footer, back-to-top, scroll animasyonları
   - Sayfa-özel stiller: home.css, iletisim.css, urunler.css, urun-detay.css
   ============================================ */

:root {
    --go-gold: #F2A900;
    --go-gold-light: #FFD040;
    --go-gold-dark: #D4940A;
    --go-black: #1A1A1A;
    --go-dark: #111111;
    --go-charcoal: #2D2D2D;
    --go-gray: #4A4A4A;
    --go-gray-light: #6B6B6B;
    --go-bg: #FAFAF8;
    --go-bg-warm: #F5F3EE;
    --go-white: #FFFFFF;
    --go-gradient-gold: linear-gradient(135deg, #F2A900 0%, #FFD040 100%);
    --go-gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    --go-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --go-shadow: 0 8px 30px rgba(0,0,0,0.08);
    --go-shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
    --go-shadow-gold: 0 8px 30px rgba(242,169,0,0.25);
    --go-radius: 14px;
    --go-radius-lg: 20px;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Global link reset: buton/breadcrumb linklerinde tıklama/focus/hover altçizgisi olmasın.
   İstenen altçizgiler (.cerez-*, .product-tab-panel a, .bayi-intro a:hover) daha özgül
   seçicilerle text-decoration:underline set ettiğinden bu resete rağmen korunur.
   NOT: footer yasal linkleri (.footer-cerez-link) 2026-08-14'te altçizgisiz yapıldı. */
a { text-decoration: none; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--go-gold) var(--go-bg-warm); }  /* gutter sabit → preloader overflow:hidden kilidinde/kalkışında yatay kayma olmaz; Firefox ince altın çubuk */

/* Özel kaydırma çubuğu (masaüstü) — Simya deseni, tek fark GO altın teması.
   Mobil tarayıcılar ::-webkit-scrollbar'ı yok sayar (overlay çubuk) → pratikte masaüstüne özel. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--go-bg-warm); }
::-webkit-scrollbar-thumb { background: var(--go-gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--go-gold-dark); }

body {
    font-family: var(--font-body);
    color: var(--go-gray);
    background: var(--go-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--go-gold); color: var(--go-black); }

/* Erişilebilirlik: içeriğe atlama linki — yalnız klavye odağında görünür (iskenderun deseni) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--go-black);
    color: var(--go-white);
    padding: 10px 18px;
    border-radius: 0 0 10px 0;
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    color: var(--go-gold);
    outline: 2px solid var(--go-gold);
}

/* ===== TOP BAR ===== */
.top-bar {
    background: var(--go-dark);
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.top-bar a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.3s; }
.top-bar a:hover { color: var(--go-gold); }
.top-bar-left { display: flex; align-items: center; }
.top-bar-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.top-bar-info i { color: var(--go-gold); font-size: 0.75rem; }
.top-bar-divider { width: 1px; height: 12px; background: rgba(255,255,255,0.15); margin: 0 14px; }
.top-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(242,169,0,0.15); color: var(--go-gold);
    font-size: 0.82rem; margin-left: 5px; transition: all 0.3s;
}
.top-social a:hover { background: var(--go-gold); color: var(--go-black); transform: translateY(-1px); }

/* ===== NAVBAR ===== */
.main-navbar {
    background: var(--go-white);
    padding: 0;
    transition: all 0.35s ease;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.main-navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); border-bottom-color: transparent; }
.main-navbar .navbar-brand { padding: 10px 0; }
.main-navbar .navbar-brand img { height: 68px; transition: height 0.3s; }
.main-navbar.scrolled .navbar-brand img { height: 52px; }
.main-navbar .nav-link {
    font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
    color: var(--go-black) !important; padding: 22px 15px !important;
    position: relative; transition: color 0.3s; letter-spacing: -0.01em;
}
.main-navbar .nav-link::before {
    content: ''; position: absolute; bottom: 0; left: 15px; right: 15px;
    height: 3px; background: var(--go-gold); border-radius: 3px 3px 0 0;
    transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.main-navbar .nav-link:hover::before,
.main-navbar .nav-link.active::before { transform: scaleX(1); }
.main-navbar .nav-link:hover { color: var(--go-gold-dark) !important; }
.navbar-toggler { border: 2px solid var(--go-gold) !important; border-radius: 10px; padding: 6px 10px; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F2A900' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }

/* Mobile drawer header + close button + backdrop (desktopta gizli) */
.mobile-nav-header { display: none; }
.mobile-nav-close { display: none; }
.navbar-backdrop { display: none; }

/* ===== MEGA DROPDOWN ===== */
.dropdown-mega { position: static; }
.dropdown-mega .dropdown-menu {
    width: 100%; border: none; border-radius: 0 0 var(--go-radius-lg) var(--go-radius-lg);
    box-shadow: var(--go-shadow-lg); padding: 30px 20px; margin-top: 0;
    border-top: 3px solid var(--go-gold); animation: megaFade 0.25s ease;
}
@keyframes megaFade { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.mega-col-title {
    padding: 8px 14px; margin-bottom: 4px;
    border-radius: 8px; background: var(--go-bg-warm);
    border-left: 3px solid var(--go-gold);
    transition: all 0.25s;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mega-col-title-link {
    flex: 1; min-width: 0;
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    color: var(--go-black); text-decoration: none; cursor: pointer;
}
.mega-col-title:hover { background: var(--go-gold); border-left-color: var(--go-black); }
.mega-col-toggle {
    display: none; flex: none; align-items: center;
    background: none; border: none; padding: 2px 4px;
    color: var(--go-black); cursor: pointer;
}
.mega-col-chevron { display: none; font-size: 0.85rem; transition: transform 0.3s; }
.dropdown-mega .dropdown-menu .mega-link {
    color: var(--go-gray); font-size: 0.83rem; padding: 5px 14px;
    display: block; text-decoration: none; border-radius: 6px; transition: all 0.2s;
}
.dropdown-mega .dropdown-menu .mega-link:hover { color: var(--go-black); background: rgba(242,169,0,0.08); padding-left: 18px; }
/* "Tüm ... Kitaplarını Gör" YALNIZ mobilde (akordeon) görünür; masaüstünde başlığın kendisi link olduğundan gizli.
   .mega-link tabanının (0,3,0) display:block'unu ezmek için AYNI özgüllük (0,3,0) + sonra gelir. */
.dropdown-mega .dropdown-menu .mega-tum-link { display: none; }
/* N seviye (2026-08-14): 3. seviye torun linkleri — girintili + soluk, ata linkine bağlı görünür.
   Taban .mega-link (0,3,0) özgüllüğünü ezmek için aynı özgüllük + sonra gelir. */
.dropdown-mega .dropdown-menu .mega-link--alt {
    padding-left: 28px; font-size: 0.78rem; opacity: 0.85; position: relative;
}
.dropdown-mega .dropdown-menu .mega-link--alt::before {
    content: '└'; position: absolute; left: 14px; opacity: 0.45; font-size: 0.72rem;
}
.dropdown-mega .dropdown-menu .mega-link--alt:hover { padding-left: 32px; opacity: 1; }

/* ===== BUTONLAR ===== */
.btn-gold {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--go-gold); color: var(--go-black);
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    padding: 14px 32px; border-radius: 100px; text-decoration: none;
    border: none; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--go-shadow-gold);
}
.btn-gold:hover { background: var(--go-gold-light); color: var(--go-black); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(242,169,0,0.35); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: rgba(255,255,255,0.8);
    font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
    padding: 13px 30px; border-radius: 100px; text-decoration: none;
    border: 2px solid rgba(255,255,255,0.15); transition: all 0.3s;
}
.btn-ghost:hover { background: var(--go-white); color: var(--go-black); border-color: var(--go-white); }

/* ===== SECTION UTILITIES (paylaşılan) ===== */
.section-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--go-gold-dark); background: rgba(242,169,0,0.08);
    padding: 6px 16px; border-radius: 100px; margin-bottom: 14px;
}
.section-heading {
    font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
    color: var(--go-black); line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.02em;
}
.section-heading .gold { color: var(--go-gold-dark); }
.section-desc { color: var(--go-gray-light); font-size: 1rem; max-width: 520px; line-height: 1.7; }

/* ===== HERO BADGE (page-hero, gomax, quick-contact-card vs.) ===== */
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(242,169,0,0.12); color: var(--go-gold);
    font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
    padding: 7px 18px; border-radius: 100px; margin-bottom: 0;
    letter-spacing: 0.04em; text-transform: uppercase;
    border: 1px solid rgba(242,169,0,0.2);
}

/* ===== PAGE HERO (alt sayfa başlığı) ===== */
.page-hero {
    position: relative;
    background: var(--go-dark);
    padding: 80px 0 64px;
    overflow: hidden;
    color: var(--go-white);
}
.page-hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(242,169,0,0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(242,169,0,0.04) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events: none;
}
.page-hero-orb {
    position: absolute; right: -120px; top: -120px;
    width: 420px; height: 420px;
    background: var(--go-gold);
    border-radius: 50%; filter: blur(80px); opacity: 0.12;
    pointer-events: none;
}
.page-hero-content { text-align: center; max-width: 720px; margin: 0 auto; }
.page-hero h1 {
    font-family: var(--font-display); font-weight: 900;
    font-size: 3rem; color: var(--go-white);
    margin: 14px 0 14px; letter-spacing: -0.02em;
}
.page-hero h1 .gold { color: var(--go-gold); }
.page-hero p {
    color: rgba(255,255,255,0.65);
    font-size: 1.05rem; line-height: 1.7;
    max-width: 600px; margin: 0 auto;
}
.page-breadcrumb {
    display: inline-flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
    color: rgba(255,255,255,0.55);
    font-size: 0.88rem;
    font-family: var(--font-display); font-weight: 500;
}
.page-breadcrumb a,
.page-breadcrumb > span {
    white-space: nowrap;
}
.page-breadcrumb a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.2s;
}
.page-breadcrumb a:hover { color: var(--go-gold); }
.page-breadcrumb .sep { font-size: 0.65rem; opacity: 0.45; }
.page-breadcrumb span { color: var(--go-gold); }

/* ===== SINIF FILTRE GRID (anasayfa + ürünlerimiz) ===== */
.sinif-filter-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-bottom: 36px;
}
.sinif-card-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--go-white); border-radius: var(--go-radius); padding: 18px 8px;
    border: 2px solid transparent; cursor: pointer; text-decoration: none;
    transition: all 0.3s; box-shadow: var(--go-shadow-sm);
}
/* Anasayfa "Ürünlerimiz" bölümü sarmalayıcısı (modul/UrunlerModul.php) */
.anasayfa-urunler-section { padding: 72px 0; }
.sinif-card-btn:hover { border-color: var(--go-gold); transform: translateY(-4px); box-shadow: var(--go-shadow); }
.sinif-card-btn:hover .sinif-num { color: var(--go-gold-dark); }
.sinif-card-btn.active { border-color: var(--go-gold); box-shadow: var(--go-shadow-gold); }
.sinif-card-btn.active .sinif-num { color: var(--go-gold-dark); }
.sinif-card-btn .sinif-num {
    font-family: var(--font-display); font-weight: 900; font-size: 2rem;
    color: var(--go-black); line-height: 1; transition: color 0.3s;
}
.sinif-card-btn .sinif-label {
    font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
    color: var(--go-gray-light); margin-top: 2px;
}

/* ===== KİTAP KARTI (anasayfa, ürünlerimiz, 12-sinif, 12-sinif-konu-anlatimli, urun-detay benzer ürünler) ===== */
.book-card {
    position: relative; border-radius: var(--go-radius-lg); overflow: hidden;
    background: var(--go-white); transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--go-shadow-sm);
    display: flex; flex-direction: column; height: 100%;
}
.book-card:hover { transform: translateY(-8px); box-shadow: var(--go-shadow-lg); border-color: rgba(242,169,0,0.3); }
.book-card .book-img-wrap {
    overflow: hidden; aspect-ratio: 1/1;
    background: linear-gradient(145deg, var(--go-bg-warm) 0%, var(--go-bg) 100%);
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.book-card img {
    width: 100%; height: 100%; object-fit: contain;   /* ham oranli medya kare kutuda ortalanir (2026-07-13) */
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.book-card:hover img { transform: scale(1.06); }
.book-card .book-info {
    padding: 16px 8px; flex: 1; display: flex; flex-direction: column;
    border-top: 1px solid rgba(0,0,0,0.04);
}
.book-card .book-info .book-series {
    font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--go-gold-dark); margin-bottom: 4px;
}
.book-card .book-info .book-title {
    font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
    color: var(--go-black); line-height: 1.3; margin-bottom: 10px; flex: 1;
}
.book-card .book-info .book-badges {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.book-card .book-info .book-badge-item {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.68rem; color: var(--go-gray-light);
    background: var(--go-bg); padding: 3px 8px; border-radius: 6px;
}
.book-card .book-info .book-badge-item i { font-size: 0.65rem; color: var(--go-gold-dark); }
/* Seri (koleksiyon) rozeti — markadan ayrı boyut; altın tonuyla öne çıkar */
.book-card .book-info .book-badge-seri {
    background: rgba(242,169,0,0.14); color: var(--go-gold-dark); font-weight: 600;
}
.book-card .book-info .book-badge-seri i { color: var(--go-gold-dark); }
.book-card .btn-book-bottom {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 12px;
    background: var(--go-black); color: var(--go-white);
    font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
    text-decoration: none; transition: all 0.3s;
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: auto;
}
.book-card .btn-book-bottom:hover { background: var(--go-gold); color: var(--go-black); }
.book-card .btn-book-bottom i { font-size: 0.75rem; transition: transform 0.3s; }
.book-card:hover .btn-book-bottom i { transform: translateX(3px); }

/* Filter animasyonu — #bookGrid (kullanılmıyor artık) + #anasayfaUrunGrid (anasayfa Ürünlerimiz) */
#bookGrid [data-sinif], #anasayfaUrunGrid [data-sinif] { transition: opacity 0.35s, transform 0.35s; }
#bookGrid [data-sinif].filter-hide, #anasayfaUrunGrid [data-sinif].filter-hide { display: none; }

/* Boş durum (anasayfa Ürünlerimiz bölümü — home.css değil, global; #anasayfaUrunBos) */
.product-listing-empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px;
    color: var(--go-gray); background: var(--go-bg-warm);
    border-radius: var(--go-radius-lg); display: none; width: 100%;
}
.product-listing-empty.show { display: block; }
.product-listing-empty i { font-size: 2.5rem; color: rgba(0,0,0,0.2); margin-bottom: 12px; }
.product-listing-empty h6 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--go-black); margin-bottom: 6px; }

/* ===== FOOTER ===== */
footer { background: var(--go-dark); padding: 52px 0 0; color: rgba(255,255,255,0.7); }  /* üstte nefes payı */
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* Koyu zeminde RENKLİ logo (admin paneliyle aynı yaklaşım: gold + beyaz varyantlar) —
   düz-beyaz filtre KALDIRILDI; logo-white.svg / logo-2-white.svg altın+beyaz olarak gelir. */
.footer-brand img { opacity: 0.96; }
.footer-brand .fb-go  { height: 60px; }        /* GO markası — masaüstünde daha belirgin */
.footer-brand .fb-max { height: 52px; }        /* GO MAX logosu (kare), dengeli dursun diye biraz küçük */
.footer-brand .fb-sep { flex: 0 0 auto; width: 1px; height: 38px; background: rgba(255,255,255,0.28); }
.footer-about {
    font-size: 0.88rem; line-height: 1.75;
    color: rgba(255,255,255,0.65); margin-bottom: 0;
}
footer h6 {
    font-family: var(--font-display); font-weight: 700; color: var(--go-white);
    font-size: 0.95rem; margin-bottom: 18px; position: relative; padding-bottom: 10px;
}
footer h6::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 3px; background: var(--go-gold); border-radius: 3px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 5px 0; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.87rem; transition: all 0.25s; }
.footer-links a:hover { color: var(--go-gold); padding-left: 3px; }
.footer-contact { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 0.87rem; }
.footer-contact i { color: var(--go-gold); font-size: 0.9rem; margin-top: 3px; flex-shrink: 0; }
.footer-contact a, .footer-contact span { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.25s; }
.footer-contact a:hover { color: var(--go-gold); }
.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(242,169,0,0.12); color: var(--go-gold);
    font-size: 1rem; text-decoration: none; transition: all 0.3s;
}
.footer-social a:hover { background: var(--go-gold); color: var(--go-black); transform: translateY(-2px); }
.footer-bottom { margin-top: 20px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.footer-double-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ===== BACK TO TOP ===== */
.back-to-top {
    position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px;
    border-radius: 13px; background: var(--go-gold); color: var(--go-black);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    z-index: 1000; opacity: 0; transform: translateY(16px);
    transition: all 0.35s; text-decoration: none; box-shadow: var(--go-shadow-gold);
}
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--go-black); color: var(--go-gold); }

/* ===== SCROLL ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: all 0.65s cubic-bezier(0.4,0,0.2,1); }
.reveal.shown { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }

/* ===== RESPONSIVE (paylaşılan) ===== */
@media (max-width: 991px) {
    .section-heading { font-size: 1.75rem; }
    .main-navbar .nav-link { padding: 12px 15px !important; }
    .main-navbar .nav-link::before { display: none; }
    .page-hero { padding: 56px 0 44px; }
    .page-hero h1 { font-size: 2.2rem; }

    /* ===== MOBILE DRAWER (sağdan açılan menü) ===== */
    .main-navbar .navbar-collapse {
        position: fixed !important;
        top: 0; right: 0; bottom: 0;
        width: 86%; max-width: 360px; height: 100vh;
        background: var(--go-white);
        box-shadow: -10px 0 40px rgba(0,0,0,0.18);
        padding: 0 20px 24px;
        overflow-y: auto;
        z-index: 1050;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
        visibility: hidden;
    }
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 4px;
        margin: 0 -20px 12px;
        padding-left: 20px; padding-right: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .mobile-nav-logo { display: inline-flex; }
    .mobile-nav-logo img { height: 48px; width: auto; }
    .main-navbar .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
    }
    .main-navbar .navbar-collapse.collapsing {
        height: 100vh !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: visible;
    }
    .navbar-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        opacity: 0; visibility: hidden;
        transition: opacity 0.35s, visibility 0.35s;
    }
    .navbar-backdrop.show { opacity: 1; visibility: visible; }
    .mobile-nav-close {
        display: flex; flex: 0 0 auto;
        width: 40px; height: 40px;
        align-items: center; justify-content: center;
        border: none; background: var(--go-bg-warm);
        color: var(--go-black); border-radius: 50%;
        font-size: 1rem; cursor: pointer;
        transition: all 0.2s;
    }
    .mobile-nav-close:hover { background: var(--go-gold); }
    .main-navbar .navbar-nav { gap: 2px; }
    .main-navbar .nav-link { padding: 14px 12px !important; border-radius: 8px; }
    .main-navbar .nav-link:hover { background: rgba(242,169,0,0.08); }
    body.drawer-open { overflow: hidden; }

    /* ===== MEGA MENU AKORDEON (mobil) ===== */
    .dropdown-mega .dropdown-menu {
        position: static !important;
        width: 100%; padding: 6px 0 0;
        box-shadow: none; border: none; border-top: none;
        background: transparent; animation: none;
        margin-top: 0;
        transform: none !important;
        float: none;
    }
    .dropdown-mega .dropdown-menu .container { padding: 0; }
    .dropdown-mega .dropdown-menu .row { margin: 0; }
    .mega-col { padding: 0; margin-bottom: 4px; }
    .mega-col-title { padding: 11px 14px; }
    .mega-col-title-link { font-size: 0.88rem; }
    .mega-col-toggle { display: inline-flex; }
    .mega-col-chevron { display: inline-block; }
    .mega-col.expanded .mega-col-chevron { transform: rotate(180deg); }
    .mega-col-content {
        max-height: 0; overflow: hidden;
        transition: max-height 0.3s ease;
        padding-left: 6px;
    }
    .mega-col.expanded .mega-col-content {
        max-height: 320px;
    }
    .dropdown-mega .dropdown-menu .mega-link {
        padding: 9px 14px; font-size: 0.85rem;
    }
    /* MOBİL: açılan panelin EN ÜSTÜNDE belirgin BOLD "Tüm ... Kitaplarını Gör" linki (0,3,0 → desktop none'ı ezer) */
    .dropdown-mega .dropdown-menu .mega-tum-link {
        display: block; font-weight: 700; color: var(--go-black);
        background: rgba(242,169,0,0.12); border-radius: 8px;
        margin-bottom: 6px; padding: 11px 14px;
    }
    .dropdown-mega .dropdown-menu .mega-tum-link:hover { background: rgba(242,169,0,0.20); color: var(--go-black); padding-left: 14px; }
    .mega-col.expanded .mega-col-content { max-height: 400px; }
}
@media (max-width: 767px) {
    .page-hero { padding: 44px 0 36px; }
    .page-hero h1 { font-size: 1.7rem; }
    .page-hero p { font-size: 0.88rem; }
    .page-hero .hero-badge { font-size: 0.72rem; padding: 5px 14px; }

    /* Sınıf filtre — mobilde 4 sütun */
    .sinif-filter-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; }
    .sinif-card-btn { padding: 14px 6px; }
    .sinif-card-btn .sinif-num { font-size: 1.6rem; }
    .sinif-card-btn .sinif-label { font-size: 0.7rem; }

    /* Footer mobil */
    footer { padding-top: 36px; }   /* mobilde daha derli toplu üst boşluk */
    .footer-brand-col { text-align: center; }
    .footer-brand { justify-content: center; margin-bottom: 12px; }
    .footer-brand .fb-go  { height: 58px; }
    .footer-brand .fb-max { height: 50px; }
    .footer-about { font-size: 0.92rem; line-height: 1.8; text-align: center; }
    .footer-social { justify-content: center; }
    .footer-double-col { grid-template-columns: 1fr 1fr; gap: 20px; }
    footer h6 { font-size: 0.9rem; }
    .footer-links a { font-size: 0.85rem; }
    .footer-contact { font-size: 0.85rem; }
}

/* ===== Header logo: GO <-> GO MAX 3D flip animasyon (dikey ortali) ===== */
.logo-anim { position: relative; display: flex; align-items: center; height: 68px; transform-style: preserve-3d; }
.main-navbar.scrolled .logo-anim { height: 52px; }
.main-navbar .navbar-brand .logo-anim img { display: block; width: auto; height: 60px; transition: height 0.3s; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.main-navbar.scrolled .navbar-brand .logo-anim img { height: 46px; }
.logo-anim .la-goem { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateY(180deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .logo-anim { animation: logoFlip 6s ease-in-out infinite; }
    .logo-anim:hover { animation-play-state: paused; }
}
@keyframes logoFlip {
    0%, 42%  { transform: perspective(800px) rotateY(0deg); }
    50%, 92% { transform: perspective(800px) rotateY(180deg); }
    100%     { transform: perspective(800px) rotateY(360deg); }
}


/* ===== KANKİ PRELOADER (çizgi film çizilme efekti — core/preloader.php + main.js) ===== */
#kankiPreloader {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--kpg, 20px);
    background: var(--go-bg, #fdf9f0);
    opacity: 1; visibility: visible;
    transition: opacity 0.5s ease, visibility 0.7s ease, transform 0.7s cubic-bezier(0.6, 0.05, 0.5, 0.95);
    animation: kpEmniyet 0s 7s forwards; /* JS çalışmazsa 7 sn sonra kendini gizler */
}
/* Preloader açıkken sayfayı kaydırma kilidi — arkadaki kaydırma çubuğu görünmesin.
   :has() ile node varken kilit, node kalkınca (kapanış sonrası remove) otomatik açılır. */
html:has(#kankiPreloader) { overflow: hidden; }
/* Anasayfa geçişi (ayar: preloaderCikis — main.js kapat() sınıfı seçer) */
#kankiPreloader.kp-git { opacity: 0; visibility: hidden; }                                  /* solma */
#kankiPreloader.kp-git-asagi { transform: translateY(103%); visibility: hidden; }           /* komple aşağı kayar */
#kankiPreloader.kp-git-yukari { transform: translateY(-103%); visibility: hidden; }         /* komple yukarı kayar */
#kankiPreloader .kp-svg { width: min(50vw, 300px); height: auto; overflow: visible; }  /* cam deliğine sığar (taşmaz) */
#kankiPreloader .kp-slogan {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: clamp(0.8rem, 2.4vw, 1rem);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--go-black, #1c1c1c);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s; /* pop'tan hemen sonra gelir */
}
#kankiPreloader.kp-boya .kp-slogan { opacity: 1; transform: translateY(0); }
/* Siyah tema (ayar: preloaderTema=siyah) — kara tahtaya beyaz tebeşir çizimi */
#kankiPreloader.kp-siyah { background: var(--go-black, #1c1c1c); }
#kankiPreloader.kp-siyah .kp-cizgi path { stroke: #fff; }
#kankiPreloader.kp-siyah .kp-slogan { color: #fff; }
#kankiPreloader .kp-cizgi path {
    fill: none;
    stroke: var(--go-black, #1c1c1c);
    stroke-width: 3.5;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: 0; /* JS dasharray ayarlayınca görünür yapar — statik kontur flaşı olmaz */
}
#kankiPreloader .kp-renk {
    opacity: 0;
    transform-box: fill-box; transform-origin: center;
}
#kankiPreloader.kp-boya .kp-renk { animation: kpPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#kankiPreloader.kp-boya .kp-cizgi { opacity: 0; transition: opacity 0.35s ease 0.12s; }
@keyframes kpPop {
    0%   { opacity: 0; transform: scale(0.9); }
    60%  { opacity: 1; transform: scale(1.045); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes kpEmniyet { to { opacity: 0; visibility: hidden; } }

/* --- Varyant: go-cizim (GO logosu shape shape içeriden çizilir; preloader.php enjeksiyonu) --- */
#kankiPreloader .kp-go svg { width: min(58vw, 340px); height: auto; overflow: visible; display: block; }
#kankiPreloader .kp-go [data-kpgo] {
    fill-opacity: 0;
    stroke: var(--go-black, #1c1c1c);
    stroke-width: 7;             /* clip ile yalnız iç yarısı görünür (~3.5) — çizim taşmaz */
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: kpGoCiz var(--cs, 0.5s) ease var(--cg, 0s) forwards,
               kpGoDolgu 0.45s ease calc(var(--cg, 0s) + var(--cs, 0.5s) * 0.7) forwards;
}
@keyframes kpGoCiz   { to { stroke-dashoffset: 0; } }
@keyframes kpGoDolgu { to { fill-opacity: 1; stroke-opacity: 0; } }
#kankiPreloader.kp-siyah .kp-go [data-kpgo] { stroke: #fff; }

/* --- Varyant: flip (GO <-> GO MAX 3B kart dönüşü; --kpf = tam tur süresi) --- */
#kankiPreloader .kp-flip { position: relative; height: min(30vw, 170px); aspect-ratio: 877 / 525; perspective: 900px; transform-style: preserve-3d; animation: kpFlipDon var(--kpf, 2.4s) ease-in-out infinite; }
#kankiPreloader .kp-flip img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#kankiPreloader .kp-flip .kpf-arka { transform: rotateY(180deg); }
@keyframes kpFlipDon {
    0%, 38%  { transform: rotateY(0deg); }
    50%, 88% { transform: rotateY(180deg); }
    100%     { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #kankiPreloader .kp-go [data-kpgo] { animation: none; fill-opacity: 1; stroke-opacity: 0; }
    #kankiPreloader .kp-flip { animation: none; }
}

/* --- Yükleme göstergesi (ayar: preloaderBar/BarStil/BarSn — simya ile ortak set) --- */
#kankiPreloader .kp-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
#kankiPreloader .kp-bar span {
    display: block; width: 38%; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--go-gold), var(--go-gold-light));
    animation: kpBarKay var(--kpb, 1.5s) ease-in-out infinite;
}
@keyframes kpBarKay { 0% { transform: translateX(-110%); } 100% { transform: translateX(380%); } }
#kankiPreloader .kp-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--go-gold);
    animation: kpSpin var(--kpb, 1.5s) linear infinite;
}
@keyframes kpSpin { to { transform: rotate(360deg); } }
#kankiPreloader.kp-siyah .kp-bar { background: rgba(255, 255, 255, 0.12); }
#kankiPreloader.kp-siyah .kp-spinner { border-color: rgba(255, 255, 255, 0.16); border-top-color: var(--go-gold); }
@media (prefers-reduced-motion: reduce) {
    #kankiPreloader .kp-bar span, #kankiPreloader .kp-spinner { animation: none; }
}
/* --- Gösterge konumu (ayar: preloaderBarKonum) — alt: flex akışında; asagi: ekranın en altında --- */
#kankiPreloader .kp-gosterge { display: flex; justify-content: center; }
#kankiPreloader .kp-gosterge--asagi { position: absolute; left: 0; right: 0; bottom: 44px; }
/* --- Varyant: kanki-cam (derinlikten gelip cama çarpar; çizim sn = yaklaşma süresi) --- */
#kankiPreloader .kp-cam-logo {
    position: relative; z-index: 3;   /* çatlaklar CAMDA (arkada), logo camı kırıp ÖNDE */
    animation: kpCamYaklas var(--kpcam, 2s) cubic-bezier(0.66, 0, 0.9, 0.28) forwards;
    will-change: transform;
}
#kankiPreloader.kp-cam-carp .kp-cam-logo { animation: kpCamOne 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
/* Sarsıntı ARTIK logoda (çatlak katmanı sabit → çizgiler titreşimde bulanıklaşmaz): pop + sallanma */
@keyframes kpCamOne {
    0%   { transform: scale(1) translate(0, 0); }
    16%  { transform: scale(1.13) translate(-7px, 5px); }
    34%  { transform: scale(1.17) translate(6px, -5px); }
    52%  { transform: scale(1.13) translate(-5px, -3px); }
    70%  { transform: scale(1.1) translate(3px, 2px); }
    100% { transform: scale(1.08) translate(0, 0); }
}
@keyframes kpCamYaklas {
    0%   { transform: scale(0.045) rotate(-6deg); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }   /* tam boyut = çarpma = ANİ kırılma */
}
/* Çarpma anı — main.js .kp-cam-carp ekler: flaş + çatlaklar + logo sarsıntısı (kpEmniyet korunur).
   Sarsıntı SADECE logoda (kpCamOne): tüm sahne titremediğinden çatlak çizgileri GPU texture ölçeklenip
   BULANIKLAŞMAZ — keskin kalır. */
#kankiPreloader.kp-cam-carp { animation: kpEmniyet 0s 7s forwards; }
#kankiPreloader .kp-cam-flas {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 52%);
}
#kankiPreloader.kp-cam-carp .kp-cam-flas { animation: kpCamFlas 0.5s ease-out forwards; }
@keyframes kpCamFlas { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
#kankiPreloader .kp-cam-catlak {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
    pointer-events: none;
    opacity: 0;
    will-change: clip-path, opacity;   /* GPU */
}
#kankiPreloader.kp-cam-catlak, #kankiPreloader .kp-cam-catlak { clip-path: circle(0px at 50% 50%); }
#kankiPreloader.kp-cam-carp .kp-cam-catlak { opacity: 1; animation: kpCatlakYayil 0.16s cubic-bezier(0.12, 0.8, 0.25, 1) forwards; }
@keyframes kpCatlakYayil { to { clip-path: circle(85vmax at 50% 50%); } }
#kankiPreloader .kp-cam-catlak path {
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke;   /* kalınlıklar ekran pikseli — büyük ekranda da kıl gibi ince */
}
/* Tek katman: TAM OPAK keskin kırık çizgisi (yumuşak hale YOK — geçişli opaklık istenmiyor) */
#kankiPreloader .kp-catlak-koyu path { stroke: rgb(12, 15, 20); }
#kankiPreloader.kp-siyah .kp-catlak-koyu path { stroke: rgb(255, 255, 255); }
/* (İç çatlak çizgileri .kp-ic kaldırıldı — delik içinde çizgi yok; kpIcDus kuralı da silindi.) */
/* Dökülen cam parçaları — çarpma anında isabet bölgesinden kopar, savrularak düşer */
#kankiPreloader .kp-cam-parcalar { transform: scale(1.5); transform-origin: 500px 350px; } /* çarpma merkezi — parçalar büyük */
#kankiPreloader .kp-cam-parcalar polygon {
    fill: rgba(185, 200, 215, 0.45);
    stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.8;
    opacity: 0;
    transform-box: fill-box; transform-origin: center;
    will-change: transform, opacity;   /* GPU */
}
#kankiPreloader.kp-siyah .kp-cam-parcalar polygon { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.45); }
#kankiPreloader.kp-cam-carp .kp-cam-parcalar polygon {
    animation: kpParcaDus var(--ds, 1.1s) cubic-bezier(0.3, 0.05, 0.85, 0.4) var(--dg, 0s) forwards;
}
@keyframes kpParcaDus {
    0%   { opacity: 0.95; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), 820px) rotate(var(--dr, 140deg)); }
}
/* Işık süpürmesi — kırılan camın üzerinden bir kez kayan yansıma */
#kankiPreloader .kp-cam-parilti {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    transform: translateX(-55%);
}
#kankiPreloader.kp-siyah .kp-cam-parilti { background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%); }
#kankiPreloader.kp-cam-carp .kp-cam-parilti { animation: kpCamParla 1.2s ease-out 0.3s forwards; }
@keyframes kpCamParla {
    0%   { opacity: 0; transform: translateX(-55%); }
    22%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(55%); }
}
@media (prefers-reduced-motion: reduce) {
    #kankiPreloader .kp-cam-logo { animation: none; }
    #kankiPreloader .kp-cam-catlak, #kankiPreloader .kp-cam-flas, #kankiPreloader .kp-cam-parilti { display: none; }
    #kankiPreloader .kp-cam-parcalar polygon { animation: none; }
    .kp-cam-zemin::after { display: none; }
    #kankiPreloader.kp-cam-carp { animation: kpEmniyet 0s 7s forwards; }
}

/* Slogan ve gösterge cam çatlaklarının ÖNÜNDE (kanki-cam) — diğer varyantlarda etkisiz */
#kankiPreloader .kp-slogan, #kankiPreloader .kp-gosterge { position: relative; z-index: 3; }
#kankiPreloader .kp-gosterge--asagi { position: absolute; }   /* "en aşağıda" konumu korunur */
/* --- Zemin (ayar: preloaderZemin, TÜM varyantlar): buzlu = anasayfa arkada blurlu seçilir --- */
#kankiPreloader[data-zemin="buzlu"]:not([data-varyant="kanki-cam"]) {
    background: rgba(250, 250, 248, 0.52);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}
#kankiPreloader.kp-siyah[data-zemin="buzlu"]:not([data-varyant="kanki-cam"]) { background: rgba(18, 18, 18, 0.58); }
/* kanki-cam: overlay şeffaf — cam paneli .kp-cam-zemin katmanında (çarpmada maskeyle DELİK açılır) */
#kankiPreloader[data-varyant="kanki-cam"], #kankiPreloader.kp-siyah[data-varyant="kanki-cam"] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kp-cam-zemin {
    position: fixed; inset: 0; z-index: 19998;   /* mercek (19999) < overlay (20000) — kardeş katman */
    background: var(--go-bg, #fdf9f0);
    transform: translateZ(0);   /* katman terfisi (GPU) */
    transition: opacity 0.5s ease, visibility 0.7s ease, transform 0.7s cubic-bezier(0.6, 0.05, 0.5, 0.95);
    animation: kpEmniyet 0s 7s forwards;   /* JS ölürse overlay ile birlikte gizlenir */
}
/* --- Mercek: delik içinde HAFİF blur + hafif tonlama (slider okunmayı bozmasın) ---
   Kardeş katman (yalıtan üst yok → backdrop-filter sayfayı görür). Mercek maskesi delik ÇOKGENİ
   (zemin maskesiyle aynı viewBox/cover), yani SADECE delikte boyanır ve orada sayfayı blur'lar.
   Logo/çatlak/slogan overlay'de (20000) ÖNDE olduğundan NET kalır — sadece arkadaki slider yumuşar. */
.kp-cam-mercek {
    position: fixed; inset: 0; z-index: 19999; pointer-events: none;
    opacity: 0; transition: opacity 0.1s ease;             /* ÖNCE kararma (kp-cam-karar), sonra çatlak — hızlı belirir */
    background: rgba(16, 13, 10, 0.10);                     /* açık tema: ÇOK HAFİF koyu ton (daha transparan) */
    -webkit-backdrop-filter: blur(6px) brightness(0.9);
    backdrop-filter: blur(6px) brightness(0.9);            /* daha blurlu + daha saydam = gerçek cam hissi */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20700%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M625%2C369%20L624%2C388%20L580%2C476%20L527%2C480%20L436%2C479%20L383%2C436%20L353%2C390%20L370%2C312%20L418%2C239%20L454%2C214%20L536%2C201%20L600%2C249%20L614%2C280%20Z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20700%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M625%2C369%20L624%2C388%20L580%2C476%20L527%2C480%20L436%2C479%20L383%2C436%20L353%2C390%20L370%2C312%20L418%2C239%20L454%2C214%20L536%2C201%20L600%2C249%20L614%2C280%20Z%27%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: cover; mask-size: cover;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.kp-cam-mercek.kp-siyah-mercek {                           /* koyu tema: AÇIK renk blur (öneri) */
    background: rgba(240, 243, 250, 0.10);
    -webkit-backdrop-filter: blur(6px) brightness(1.08);
    backdrop-filter: blur(6px) brightness(1.08);
}
.kp-cam-mercek.kp-cam-karar, .kp-cam-mercek.kp-cam-carp { opacity: 1; }   /* karar = çatlaktan ÖNCE delik kararır */
.kp-cam-mercek.kp-git { opacity: 0; }
.kp-cam-mercek.kp-git-asagi { transform: translateY(103%); }
.kp-cam-mercek.kp-git-yukari { transform: translateY(-103%); }
@media (prefers-reduced-motion: reduce) { .kp-cam-mercek { display: none; } }
.kp-cam-zemin.kp-siyah-zemin { background: var(--go-black, #1c1c1c); }
.kp-cam-zemin[data-zemin="buzlu"] {
    background: rgba(250, 250, 248, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
}
.kp-cam-zemin.kp-siyah-zemin[data-zemin="buzlu"] { background: rgba(15, 15, 15, 0.6); }
/* Kapanış: overlay ile aynı sınıfları alır (main.js) */
.kp-cam-zemin.kp-git { opacity: 0; visibility: hidden; }
.kp-cam-zemin.kp-git-asagi { transform: translateY(103%); visibility: hidden; }
.kp-cam-zemin.kp-git-yukari { transform: translateY(-103%); visibility: hidden; }
/* Çarpma: isabet bölgesindeki cam TAMAMEN gider — delikte sayfa NET görünür, çevre buzlu kalır */
/* Çarpma: cam Halka2 ÇOKGENİ şeklinde delinir (yuvarlak DEĞİL — çatlakla birebir hizalı,
   viewBox 1000x700 + mask-size cover = çatlak SVG'nin slice-cover'ıyla aynı ölçek). Delikte sayfa NET. */
.kp-cam-zemin.kp-cam-carp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20700%27%3E%3Cpath%20fill%3D%27%23fff%27%20fill-rule%3D%27evenodd%27%20d%3D%27M0%2C0H1000V700H0Z%20M625%2C369%20L624%2C388%20L580%2C476%20L527%2C480%20L436%2C479%20L383%2C436%20L353%2C390%20L370%2C312%20L418%2C239%20L454%2C214%20L536%2C201%20L600%2C249%20L614%2C280%20Z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20700%27%3E%3Cpath%20fill%3D%27%23fff%27%20fill-rule%3D%27evenodd%27%20d%3D%27M0%2C0H1000V700H0Z%20M625%2C369%20L624%2C388%20L580%2C476%20L527%2C480%20L436%2C479%20L383%2C436%20L353%2C390%20L370%2C312%20L418%2C239%20L454%2C214%20L536%2C201%20L600%2C249%20L614%2C280%20Z%27%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: cover; mask-size: cover;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Cam aralıklarında yüzey parlamaları — merkezden ışıyan dilimler, çarpma sonrası belirir */
.kp-cam-zemin::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity 0.45s ease 0.12s;
    background: conic-gradient(from 8deg at 50% 50%,
        transparent 0deg 22deg, rgba(255, 255, 255, 0.14) 25deg 31deg, transparent 34deg 78deg,
        rgba(255, 255, 255, 0.10) 82deg 87deg, transparent 90deg 137deg,
        rgba(255, 255, 255, 0.13) 141deg 148deg, transparent 152deg 201deg,
        rgba(255, 255, 255, 0.09) 205deg 210deg, transparent 213deg 262deg,
        rgba(255, 255, 255, 0.12) 266deg 273deg, transparent 276deg 320deg,
        rgba(255, 255, 255, 0.08) 324deg 328deg, transparent 331deg 360deg);
}
.kp-cam-zemin.kp-cam-carp::after { opacity: 1; }
/* Cam yüzeyi hissi (buzlu zemin + kanki-cam'de her zaman): yansıma bantları + buğu vinyeti */
#kankiPreloader[data-zemin="buzlu"]:not([data-varyant="kanki-cam"])::before,
.kp-cam-zemin::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, 0.10) 29%, transparent 40%),
        linear-gradient(112deg, transparent 56%, rgba(255, 255, 255, 0.06) 66%, transparent 78%),
        radial-gradient(130% 100% at 50% 46%, transparent 55%, rgba(255, 255, 255, 0.12) 100%);
}
@supports not (backdrop-filter: blur(1px)) {
    /* backdrop-filter yoksa buzlu cam okunaksız olur — düz zemine dön */
    #kankiPreloader[data-zemin="buzlu"]:not([data-varyant="kanki-cam"]) { background: var(--go-bg, #fdf9f0); }
    #kankiPreloader.kp-siyah[data-zemin="buzlu"]:not([data-varyant="kanki-cam"]) { background: var(--go-black, #1c1c1c); }
    .kp-cam-zemin[data-zemin="buzlu"] { background: var(--go-bg, #fdf9f0); }
    .kp-cam-zemin.kp-siyah-zemin[data-zemin="buzlu"] { background: var(--go-black, #1c1c1c); }
}
#kankiPreloader[data-zemin="buzlu"] .kp-slogan,
#kankiPreloader[data-varyant="kanki-cam"] .kp-slogan {
    padding: 11px 26px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.72);   /* daha belirgin panel — arka plan bleed'i azalır */
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#kankiPreloader.kp-siyah[data-zemin="buzlu"] .kp-slogan,
#kankiPreloader.kp-siyah[data-varyant="kanki-cam"] .kp-slogan {
    background: rgba(16, 16, 20, 0.74);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* Yükleme göstergesi çipi: buzlu cam pill, ÖNDE (z-index 3) — bar/spinner üzerinde durur */
#kankiPreloader[data-zemin="buzlu"] .kp-gosterge,
#kankiPreloader[data-varyant="kanki-cam"] .kp-gosterge {
    padding: 9px 18px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#kankiPreloader.kp-siyah[data-zemin="buzlu"] .kp-gosterge,
#kankiPreloader.kp-siyah[data-varyant="kanki-cam"] .kp-gosterge {
    background: rgba(16, 16, 20, 0.74);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* "En aşağıda" göstergesi de çipin genişliğinde ortalanır (padding pill'i daraltmasın) */
#kankiPreloader .kp-gosterge--asagi { width: fit-content; margin: 0 auto; }

/* --- Preloader mobil uyum (320 / 360 / 390 / 480 / 768 / 1200) — logo cam deliğine sığacak boyutta --- */
@media (max-width: 1200px) {
    #kankiPreloader .kp-svg { width: min(48vw, 290px); }
}
@media (max-width: 768px) {
    #kankiPreloader { gap: min(var(--kpg, 20px), 30px); }   /* mobilde logo-slogan yüksekliğini kısıtla */
    #kankiPreloader .kp-svg { width: min(54vw, 280px); }
    #kankiPreloader .kp-go svg { width: min(58vw, 290px); }
    #kankiPreloader .kp-flip { height: min(34vw, 150px); }
    #kankiPreloader[data-zemin] .kp-slogan { letter-spacing: 0.12em; padding: 9px 18px; }   /* [data-zemin] = çip kuralıyla eşit özgüllük, sonra geldiği için kazanır */
    #kankiPreloader[data-zemin] .kp-gosterge { padding: 8px 15px; }
    #kankiPreloader .kp-bar { width: 150px; }
    #kankiPreloader .kp-gosterge--asagi { bottom: 32px; }
}
@media (max-width: 480px) {
    #kankiPreloader { gap: min(var(--kpg, 20px), 22px); }
    #kankiPreloader .kp-svg { width: 54vw; }
    #kankiPreloader .kp-go svg { width: 62vw; }
    #kankiPreloader[data-zemin] .kp-slogan { font-size: clamp(0.62rem, 3vw, 0.82rem); letter-spacing: 0.08em; padding: 8px 15px; }
    #kankiPreloader[data-zemin] .kp-gosterge { padding: 7px 13px; }
    #kankiPreloader .kp-bar { width: 120px; }
    #kankiPreloader .kp-spinner { width: 30px; height: 30px; }
}
@media (max-width: 360px) {
    #kankiPreloader { gap: min(var(--kpg, 20px), 18px); }
    #kankiPreloader .kp-svg { width: 56vw; }
    #kankiPreloader[data-zemin] .kp-slogan { font-size: 0.6rem; letter-spacing: 0.06em; padding: 7px 12px; }
    #kankiPreloader .kp-bar { width: 100px; }
}
@media (max-width: 320px) {
    #kankiPreloader .kp-svg { width: 56vw; }
    #kankiPreloader[data-zemin] .kp-slogan { font-size: 0.56rem; letter-spacing: 0.05em; padding: 6px 11px; }
    #kankiPreloader .kp-bar { width: 88px; }
    #kankiPreloader .kp-gosterge--asagi { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    #kankiPreloader.kp-git-asagi, #kankiPreloader.kp-git-yukari { transform: none; opacity: 0; }
}

/* ===== ÇEREZ (KVKK/GDPR) BARI + TERCİH MODALI (Simya'dan port, GO altın teması) ===== */
.cerez-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1040;
    background: var(--go-dark);
    color: #f3f3f5;
    box-shadow: 0 -6px 28px rgba(0,0,0,0.22);
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease;
}
.cerez-bar--gizli { transform: translateY(110%); opacity: 0; pointer-events: none; }
.cerez-bar__inner {
    max-width: 1240px; margin: 0 auto;
    padding: 0.7rem 1.5rem;
    display: flex; align-items: center; flex-wrap: nowrap; gap: 1.25rem;
}
.cerez-bar__metin {
    margin: 0; font-size: 0.875rem; line-height: 1.5;
    display: flex; align-items: center; gap: 0.7rem;
    flex: 1 1 auto; min-width: 0;
}
.cerez-bar__metin > i { color: var(--go-gold); font-size: 1.35rem; flex: none; }
.cerez-bar__metin > span { min-width: 0; }
.cerez-bar__link { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cerez-bar__link:hover { color: var(--go-gold); }
.cerez-bar__aksiyon { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Ortak buton stilleri (bar + modal) */
.cerez-btn {
    border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
    padding: 0.5rem 1.15rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.cerez-btn--kabul { background: var(--go-gold); color: var(--go-black); box-shadow: 0 4px 14px rgba(242,169,0,0.32); }
.cerez-btn--kabul:hover { background: var(--go-gold-dark); transform: translateY(-1px); }
.cerez-btn--reddet { background: transparent; color: #e7e7ea; border: 1px solid rgba(255,255,255,0.3); }
.cerez-btn--reddet:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.cerez-btn--ayar { background: transparent; color: #b9b9c2; padding-inline: 0.5rem; text-decoration: underline; text-underline-offset: 3px; }
.cerez-btn--ayar:hover { color: #fff; }

/* Tercih modalı */
.cerez-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cerez-modal[hidden] { display: none; }
.cerez-modal__arka { position: absolute; inset: 0; background: rgba(10,10,18,0.55); backdrop-filter: blur(2px); }
.cerez-modal__kutu {
    position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
    background: var(--go-white); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    animation: cerezModalAc 0.28s cubic-bezier(0.22,1,0.36,1);
}
@keyframes cerezModalAc { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cerez-modal__ust { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); }
.cerez-modal__x { background: transparent; border: 0; color: var(--go-gray-light); font-size: 1.1rem; cursor: pointer; padding: 0.3rem; line-height: 1; }
.cerez-modal__x:hover { color: var(--go-gold); }
.cerez-modal__govde { padding: 1.3rem 1.5rem; }
.cerez-modal__giris { font-size: 0.88rem; color: var(--go-gray); line-height: 1.7; margin: 0 0 1.2rem; }
.cerez-modal__giris .cerez-bar__link { color: var(--go-gold-dark); white-space: normal; }
.cerez-modal__logo { height: 34px; width: auto; display: block; }

/* Modal sekmeleri (Ayarlar / Çerez Politikası) */
.cerez-sekmeler { display: flex; gap: 1.4rem; padding: 0 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); }
.cerez-sekme { background: none; border: 0; cursor: pointer; padding: 0.85rem 0; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--go-gray-light); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; }
.cerez-sekme:hover { color: var(--go-gold-dark); }
.cerez-sekme--aktif { color: var(--go-gold-dark); border-bottom-color: var(--go-gold); }
.cerez-sekme-panel { display: none; }
.cerez-sekme-panel--aktif { display: block; }

/* Uyumluluk rozetleri (Çerez Politikası sekmesi — KVKK / GDPR / Consent Mode v2) */
.cerez-uyum { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.1); }
.cerez-uyum-baslik { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--go-black); margin: 0 0 0.6rem; }
.cerez-uyum-kart { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; }
.cerez-uyum-kart + .cerez-uyum-kart { border-top: 1px solid rgba(0,0,0,0.06); }
.cerez-uyum-ikon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(242,169,0,0.12); color: var(--go-gold-dark); font-size: 1rem; }
.cerez-uyum-metin strong { display: block; font-size: 0.87rem; color: var(--go-black); font-weight: 700; margin-bottom: 0.12rem; }
.cerez-uyum-metin span { font-size: 0.79rem; color: var(--go-gray-light); line-height: 1.5; }

/* Akordeon kategori */
.cerez-kat { padding: 0; border-top: 1px solid rgba(0,0,0,0.06); }
.cerez-kat:first-child { border-top: 0; }
.cerez-kat__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; }
.cerez-kat__ac { flex: 1 1 auto; display: flex; align-items: center; gap: 0.6rem; background: none; border: 0; cursor: pointer; padding: 0; text-align: left; min-width: 0; }
.cerez-kat__ac strong { font-size: 0.95rem; color: var(--go-black); font-weight: 700; }
.cerez-kat__ok { color: #9a9a9a; font-size: 0.72rem; transition: transform 0.25s ease, color 0.2s; flex: none; }
.cerez-kat--acik .cerez-kat__ok { transform: rotate(90deg); color: var(--go-gold); }
.cerez-kat__hep { flex: none; font-size: 0.76rem; font-weight: 700; color: var(--go-gold-dark); background: rgba(242,169,0,0.12); padding: 0.25rem 0.7rem; border-radius: 50px; }
.cerez-kat__aciklama { display: none; font-size: 0.83rem; color: var(--go-gray-light); line-height: 1.6; padding: 0 0 0.9rem 1.35rem; }
.cerez-kat--acik .cerez-kat__aciklama { display: block; animation: cerezKatAc 0.25s ease; }
@keyframes cerezKatAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Sol-alt yüzen çerez tercih ikonu (rıza sonrası görünür) */
.cerez-fab {
    position: fixed; left: 2rem; bottom: 2rem; z-index: 1050;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--go-white); color: var(--go-gold-dark);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.16);
    font-size: 1.5rem; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cerez-fab--gorunur { display: flex; }
.cerez-fab:hover { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 10px 28px rgba(242,169,0,0.35); background: var(--go-gold); color: var(--go-black); }

/* Footer "Çerez Ayarları" linki (koyu footer alt satırı) */
.footer-cerez-link { color: rgba(255,255,255,0.62); }   /* 2026-08-14: altçizgi kaldırıldı (kullanıcı tercihi) */
.footer-cerez-link:hover { color: var(--go-gold); }
.footer-cerez-ayrac { color: rgba(255,255,255,0.3); margin: 0 3px; }

.cerez-modal__alt { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; padding: 1.1rem 1.5rem; border-top: 1px solid rgba(0,0,0,0.1); background: var(--go-bg); border-radius: 0 0 16px 16px; }
.cerez-modal__alt .cerez-btn--reddet { color: var(--go-gray); border-color: rgba(0,0,0,0.18); }
.cerez-modal__alt .cerez-btn--reddet:hover { border-color: var(--go-gray-light); background: rgba(0,0,0,0.04); }
.cerez-modal__alt .cerez-btn--ayar { color: var(--go-gold-dark); }
.cerez-modal__alt .cerez-btn--ayar:hover { color: var(--go-black); }

/* Toggle switch */
.cerez-switch { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.cerez-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cerez-switch__yuva { position: absolute; inset: 0; background: rgba(0,0,0,0.22); border-radius: 999px; transition: background 0.2s; }
.cerez-switch__yuva::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
.cerez-switch input:checked + .cerez-switch__yuva { background: var(--go-gold); }
.cerez-switch input:checked + .cerez-switch__yuva::after { transform: translateX(20px); }

@media (max-width: 860px) {
    .cerez-bar__inner { flex-wrap: wrap; padding: 0.85rem 1.1rem; gap: 0.75rem; }
    .cerez-bar__metin { flex: 1 1 100%; }
    .cerez-bar__aksiyon { flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 520px) {
    .cerez-bar__aksiyon { flex-wrap: wrap; }
    .cerez-bar__aksiyon .cerez-btn--reddet, .cerez-bar__aksiyon .cerez-btn--kabul { flex: 1 1 auto; text-align: center; }
    .cerez-modal__alt { justify-content: stretch; }
    .cerez-modal__alt .cerez-btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cerez-bar, .cerez-modal__kutu { transition: none; animation: none; } }
/* ===== ÜRÜN BULUNAMADI (detay 404) ===== */
.urun-bulunamadi-section { padding: 90px 0 110px; }
.urun-bulunamadi { max-width: 560px; margin: 0 auto; }
.urun-bulunamadi-ikon { font-size: 3.4rem; color: var(--gold, #e0a82e); margin-bottom: 1rem; }
.urun-bulunamadi-aksiyon { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.btn-gold--sade { background: transparent; border: 1px solid var(--gold, #e0a82e); color: var(--gold, #e0a82e); }

/* Anasayfa Ürünlerimiz: eksik satırı ortala (Bootstrap .row zaten 4'lü col-xl-3) */
#anasayfaUrunGrid { justify-content: center; }
/* ===== ÖNE ÇIKAN (VİTRİN) CAROUSEL — yanyana kaydırmalı ===== */
.vitrin-section { padding: 72px 0; }
.vitrin-carousel { display: flex; align-items: center; gap: 10px; position: relative; }
.vitrin-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; padding: 8px 6px 20px; }
.vitrin-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--vitrin-satir, 1), auto);
    grid-auto-columns: var(--vitrin-col-w, 250px);
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.vitrin-track > * { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; }
.vitrin-ok {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid rgba(0, 0, 0, .1); color: #1a1a2e;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1); cursor: pointer; font-size: 1.05rem;
    transition: transform .2s, background .2s, color .2s, box-shadow .2s; z-index: 2;
}
.vitrin-ok:hover:not(:disabled) { background: var(--primary, #d4a017); color: #fff; transform: scale(1.08); }
.vitrin-ok:disabled { opacity: .32; cursor: default; box-shadow: none; }
.vitrin-carousel.vitrin-tek-sayfa .vitrin-ok { display: none; }
.vitrin-ok-mobil { display: none; }
@media (max-width: 767px) {
    .vitrin-carousel { flex-wrap: wrap; }   /* mobilde oklar alt satıra sarabilsin */
    .vitrin-carousel > .vitrin-ok { display: none; }
    .vitrin-track { column-gap: 0.8rem; row-gap: 0.8rem; }
    /* Mobil oklar ürünlerin ALTINDA: tam satır (flex-basis 100%) → carousel wrap ile alta iner, yana değil */
    .vitrin-ok-mobil { display: flex; flex: 0 0 100%; width: 100%; justify-content: center; gap: 16px; margin-top: 18px; }
    .vitrin-carousel.vitrin-tek-sayfa .vitrin-ok-mobil { display: none; }
}