/*
 * Foninox modern arayüz katmanı.
 * style.css @layer içinde olduğu için bu dosyadaki (katmansız) kurallar onun üzerine yazar.
 * Animasyonlar sadece js/modern.js "js-anim" sınıfını eklediğinde ve kullanıcı hareket azaltmayı seçmediyse çalışır.
 */

:root {
    --fx-navy: #0a1730;
    --fx-navy-2: #10264d;
    --fx-blue: #0b5ed7;
    --fx-teal: #12b5c9;
    --fx-green: #0ca678;
    --fx-grad: linear-gradient(135deg, #0b5ed7 0%, #12b5c9 55%, #0ca678 100%);
    --fx-grad-dark: linear-gradient(135deg, #0a1730 0%, #10264d 45%, #0b4a8f 100%);
    --fx-steel: linear-gradient(135deg, #f8fafc 0%, #eef2f7 50%, #e2e8f0 100%);
    --fx-radius: 18px;
    --fx-shadow: 0 1px 2px rgba(10, 23, 48, 0.04), 0 8px 24px rgba(10, 23, 48, 0.06);
    --fx-shadow-hover: 0 2px 4px rgba(10, 23, 48, 0.06), 0 20px 40px rgba(11, 94, 215, 0.14);
    --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(18, 181, 201, 0.25); }

/* --- Kaydırma ilerleme çubuğu --- */
.fx-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 2000;
    background: var(--fx-grad); transform-origin: 0 50%; transform: scaleX(0);
    pointer-events: none;
}

/* --- Üst menü: cam efekti --- */
header.header-main {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-block-end: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: none;
}
header.header-main.header-scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 24px rgba(10, 23, 48, 0.08); }
header.header-main .container { transition: padding 0.35s var(--fx-ease); }
header.header-main.header-scrolled .container { padding-block: 0.5rem; }
header.header-main .logo img { transition: transform 0.35s var(--fx-ease); }
header.header-main.header-scrolled .logo img { transform: scale(0.88); }

.main-menu a { border-radius: 999px; padding-inline: 0.25rem; }
.main-menu a::after { background: var(--fx-grad); height: 2px; border-radius: 2px; }
.main-menu .lang-switch a {
    padding: 0.35rem 0.8rem; border: 1px solid rgba(11, 94, 215, 0.25); border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.main-menu .lang-switch a:hover { background: var(--fx-blue); color: #fff; border-color: var(--fx-blue); }
.main-menu .lang-switch a::after { display: none; }

/* --- Butonlar --- */
.btn { border-radius: 999px; letter-spacing: 0.01em; transition: transform 0.3s var(--fx-ease), box-shadow 0.3s var(--fx-ease), background-position 0.6s var(--fx-ease), color 0.2s ease; }
.btn-primary {
    background-image: linear-gradient(120deg, #0b5ed7 0%, #12b5c9 50%, #0b5ed7 100%);
    background-size: 200% 100%; background-position: 0% 0; border: 0; color: #fff;
    box-shadow: 0 6px 18px rgba(11, 94, 215, 0.28);
}
.btn-primary:hover:not(:disabled) { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 94, 215, 0.35); color: #fff; }
.btn-primary:active { transform: translateY(0); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(18, 181, 201, 0.55); outline-offset: 3px; }

/* --- Ana sayfa video alanı --- */
.hero { isolation: isolate; }
.hero-overlay { background: linear-gradient(180deg, rgba(10, 23, 48, 0.35) 0%, rgba(10, 23, 48, 0.65) 70%, rgba(10, 23, 48, 0.85) 100%); }
.hero-video-container video, .hero-video { transform: scale(1.06); animation: fx-hero-zoom 18s ease-out forwards; }
.hero h1 { letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); }
.hero h1::after { background: var(--fx-grad); }
.hero .btn-primary { background-image: none; background: #fff; color: var(--fx-navy); }
.hero .btn-primary:hover { background: #fff; color: var(--fx-blue); }
.hero::after {
    content: ""; position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 14px; z-index: 3; pointer-events: none;
}
.hero::before {
    content: ""; position: absolute; left: 50%; bottom: 46px; width: 4px; height: 8px; margin-left: -2px;
    background: #fff; border-radius: 2px; z-index: 3; animation: fx-scroll-hint 1.8s ease-in-out infinite; pointer-events: none;
}

/* --- Sayfa başlığı bandı --- */
.page-header { background: var(--fx-grad-dark); position: relative; overflow: hidden; isolation: isolate; }
.page-header::before, .page-header::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; z-index: -1;
    animation: fx-float 14s ease-in-out infinite alternate;
}
.page-header::before { width: 420px; height: 420px; background: #12b5c9; top: -220px; right: -80px; }
.page-header::after { width: 360px; height: 360px; background: #0ca678; bottom: -240px; left: -60px; animation-delay: -6s; }
.page-header h1 { letter-spacing: -0.02em; }
.page-header h1::after { background: var(--fx-grad); }

/* --- Bölüm başlıkları --- */
.section-title::after, .pms-title::after { background: var(--fx-grad); transform-origin: center; }
.js-anim .section-title::after, .js-anim .pms-title::after { transform: scaleX(0); transition: transform 0.9s var(--fx-ease) 0.2s; }
.js-anim .fx-in.section-title::after, .js-anim .fx-in.pms-title::after,
.js-anim .fx-in .section-title::after { transform: scaleX(1); }

/* --- Kartlar --- */
.product-card, .pms-card, .about-card, .related-product-card, .info-item, .gallery-item {
    border-radius: var(--fx-radius); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: var(--fx-shadow);
    transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.45s ease;
    overflow: hidden; position: relative; background: #fff;
}
.product-card:hover, .pms-card:hover, .about-card:hover, .related-product-card:hover, .info-item:hover, .gallery-item:hover {
    transform: translateY(-6px); box-shadow: var(--fx-shadow-hover); border-color: rgba(18, 181, 201, 0.35);
}
.product-card::before, .pms-card::before, .about-card::before, .related-product-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fx-grad);
    transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--fx-ease); z-index: 2;
}
.product-card:hover::before, .pms-card:hover::before, .about-card:hover::before, .related-product-card:hover::before { transform: scaleX(1); }
.product-card img, .gallery-item img, .related-product-card img { transition: transform 0.9s var(--fx-ease), filter 0.6s ease; }
.product-card:hover img, .gallery-item:hover img, .related-product-card:hover img { transform: scale(1.06); }
.product-card .product-image, .product-card .card-image-container { background: var(--fx-steel); overflow: hidden; }
.product-card h3::after { background: var(--fx-grad); }

.pms-card-icon, .about-card-icon {
    background: var(--fx-grad); color: #fff; box-shadow: 0 10px 24px rgba(18, 181, 201, 0.3);
    transition: transform 0.5s var(--fx-ease);
}
.pms-card:hover .pms-card-icon, .about-card:hover .about-card-icon { transform: rotate(-8deg) scale(1.08); }

/* --- İstatistikler --- */
.pms-stats { border-radius: var(--fx-radius); background: var(--fx-grad-dark); border: 0; box-shadow: 0 20px 50px rgba(10, 23, 48, 0.25); }
.pms-stats .stat-number { background: linear-gradient(120deg, #7dd3fc, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pms-stats .stat-label { color: rgba(255, 255, 255, 0.8); }

/* --- Ürün detayı --- */
.main-image { border-radius: var(--fx-radius); overflow: hidden; background: var(--fx-steel); box-shadow: var(--fx-shadow); }
.main-image img { transition: opacity 0.35s ease, transform 0.6s var(--fx-ease); }
.main-image:hover img { transform: scale(1.03); }
.thumbnail-images img { border-radius: 10px; border: 2px solid transparent; transition: transform 0.3s var(--fx-ease), border-color 0.3s ease, opacity 0.3s ease; opacity: 0.75; }
.thumbnail-images img:hover, .thumbnail-images img.active-thumb { opacity: 1; border-color: var(--fx-teal); transform: translateY(-2px); }
.product-features li { transition: background 0.25s ease, padding-left 0.3s var(--fx-ease); border-radius: 8px; }
.product-features li:hover { background: rgba(18, 181, 201, 0.06); padding-left: 0.6rem; }
.product-cta { border-radius: var(--fx-radius); background: var(--fx-steel); border-left: 4px solid; border-image: var(--fx-grad) 1; }
.urun-tablo { border-radius: 12px; overflow: hidden; box-shadow: var(--fx-shadow); }
.urun-tablo tr { transition: background 0.2s ease; }
.urun-tablo tbody tr:hover td, .urun-tablo tbody tr:hover th { background: rgba(18, 181, 201, 0.07); }

/* --- Model bağlantı listesi (kategori sayfaları) --- */
.urun-modelleri h2 { margin-bottom: 1rem; }
.urun-modelleri h3 { margin: 1.5rem 0 0.75rem; font-size: 1.05rem; color: var(--fx-navy); }
.urun-modelleri .product-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.urun-modelleri .product-features li { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 12px; padding: 0; background: #fff; }
.urun-modelleri .product-features li:hover { padding-left: 0; border-color: rgba(18, 181, 201, 0.45); transform: translateY(-2px); box-shadow: var(--fx-shadow); }
.urun-modelleri .product-features li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; color: var(--fx-navy); font-weight: 500; text-decoration: none; }
.urun-modelleri .product-features li i { order: 2; margin-left: auto; color: var(--fx-teal); transition: transform 0.3s var(--fx-ease); }
.urun-modelleri .product-features li:hover i { transform: translateX(4px); }
.urun-modelleri .product-features li { transition: transform 0.3s var(--fx-ease), box-shadow 0.3s ease, border-color 0.3s ease; }

/* --- Harekete geçirici bant --- */
section.cta { background: var(--fx-grad-dark); position: relative; overflow: hidden; isolation: isolate; }
section.cta::before {
    content: ""; position: absolute; inset: -50%; z-index: -1; opacity: 0.35;
    background: conic-gradient(from 0deg, transparent 0 60%, #12b5c9 75%, transparent 90%);
    animation: fx-spin 16s linear infinite;
}
section.cta .btn-primary { background: #fff; color: var(--fx-navy); }

/* --- Alt bilgi --- */
.site-footer { background: var(--fx-navy); }
.site-footer h3::after, .site-footer h2::after { background: var(--fx-grad); }
.site-footer a { transition: color 0.2s ease, padding-left 0.3s var(--fx-ease); }
.site-footer .footer-section ul a:hover { color: #5eead4; padding-left: 4px; }
.social-icons a { transition: transform 0.3s var(--fx-ease), background 0.3s ease; }
.social-icons a:hover { transform: translateY(-3px); background: var(--fx-grad); }

/* --- Yukarı çık düğmesi --- */
.fx-top {
    position: fixed; right: 20px; bottom: 92px; width: 44px; height: 44px; border-radius: 50%; border: 0; z-index: 900;
    background: var(--fx-navy); color: #fff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 8px 20px rgba(10, 23, 48, 0.3);
    opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s var(--fx-ease), background 0.3s ease;
}
.fx-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fx-top:hover { background: var(--fx-blue); }

/* --- Kaydırınca belirme animasyonları --- */
.js-anim .fx-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--fx-ease), transform 0.8s var(--fx-ease); transition-delay: var(--fx-delay, 0ms); }
.js-anim .fx-reveal[data-fx="left"] { transform: translateX(-32px); }
.js-anim .fx-reveal[data-fx="right"] { transform: translateX(32px); }
.js-anim .fx-reveal[data-fx="zoom"] { transform: scale(0.94); }
.js-anim .fx-reveal.fx-in { opacity: 1; transform: none; }

@keyframes fx-hero-zoom { to { transform: scale(1); } }
@keyframes fx-scroll-hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }
@keyframes fx-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.15); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
    .hero::before, .hero::after { display: none; }
    .fx-top { right: 16px; bottom: 84px; }
    .product-card:hover, .pms-card:hover, .about-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .hero-video-container video, .hero-video { transform: none; }
}

/* Eski sayfalardaki "İlgili Ürünler" kartları */
.related-products .product-card { display: flex; flex-direction: column; }
.related-products .product-card h4, .related-products .product-card > p { padding-inline: 1rem; }
.related-products .product-card h4 { margin-top: 0.9rem; }
.related-products .product-card > .btn { margin: auto 1rem 1rem; align-self: flex-start; }
.related-products .product-card picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Çerez bandı açıkken WhatsApp düğmesi bandın üstüne binmesin */
body:has(.cookie-consent:where(.show, .active)) .whatsapp-fab,
body:has(.cookie-consent:where(.show, .active)) .fx-top { opacity: 0; pointer-events: none; }

/* Mobilde alt bilgi bağlantıları parmakla kolay dokunulsun */
@media (max-width: 767px) {
    .site-footer .footer-section ul a { display: inline-block; padding-block: 8px; }
}

/* --- Ürünler sayfası: kategoriye göre model özeti --- */
.urun-modelleri-ozet { padding: 4rem 0; background: #f6f8fb; }
.urun-modelleri-ozet h2 { margin-bottom: 0.5rem; }
.urun-modelleri-ozet .ozet-aciklama { color: #5b6472; margin-bottom: 2rem; }
.ozet-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ozet-kart { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; padding: 1.25rem 1.25rem 0.75rem; }
.ozet-kart.genis { grid-column: 1 / -1; }
.ozet-kart h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin: 0 0 0.75rem; }
.ozet-kart h3 a { color: var(--fx-navy); text-decoration: none; }
.ozet-kart h3 a:hover { color: var(--fx-blue); }
.ozet-kart h3 span { font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--fx-grad); border-radius: 999px; padding: 0.1rem 0.55rem; }
.ozet-kart ul { list-style: none; margin: 0; padding: 0; }
.ozet-kart.genis ul { columns: 2; column-gap: 2rem; }
.ozet-kart li { break-inside: avoid; border-top: 1px solid rgba(15, 23, 42, 0.06); }
.ozet-kart li a { display: block; padding: 0.6rem 0; text-decoration: none; color: inherit; transition: padding-left 0.25s var(--fx-ease); }
.ozet-kart li a:hover { padding-left: 6px; }
.ozet-kart li strong { display: block; color: var(--fx-navy); font-size: 0.95rem; }
.ozet-kart li a:hover strong { color: var(--fx-blue); }
.ozet-kart li small { display: block; color: #6b7280; font-size: 0.82rem; line-height: 1.35; }
.urun-modelleri-ozet .ozet-buton { margin-top: 1.75rem; text-align: center; }
@media (max-width: 900px) { .ozet-izgara { grid-template-columns: 1fr; } .ozet-kart.genis ul { columns: 1; } }

/* Özel gün pop-up: dikey görseller ekrana sığsın, kapatma düğmesi hep görünsün */
.special-day-popup .popup-content { inline-size: auto; max-inline-size: min(520px, 100%); }
.special-day-popup .popup-content img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: calc(100vh - 2rem); max-block-size: calc(100dvh - 2rem); }

/* Mobil hero: küçük poster (LCP) */
@media (max-width: 768px) { .hero { background-image: url('../images/video-poster-800.webp'); } }