/* =====================================================================
   Aras Güvenlik Sistemleri — Kurumsal Tanıtım Sitesi
   Bağımsız, izole stylesheet - admin panelinin assets/css/style.css
   dosyasıyla HİÇBİR class adı paylaşmaz. Tüm seçiciler .ag- önekiyle
   namespace'lenmiştir (bkz. proje talimatı madde 23) - admin CSS'ine
   asla sızmaz, admin CSS'i buraya asla sızmaz.
   ===================================================================== */

:root {
    --ag-red: #e0121c;
    --ag-red-dark: #a80e16;
    --ag-red-light: #fdeceb;
    --ag-black: #0a0a0b;
    --ag-ink: #17181a;
    --ag-white: #ffffff;
    --ag-gray-50: #fafafa;
    --ag-gray-100: #f1f1f2;
    --ag-gray-200: #e4e4e6;
    --ag-gray-400: #a9abb1;
    --ag-gray-600: #6b6d73;
    --ag-gray-800: #2b2c2f;

    /* Premium tipografi yığını - harici font indirilmedi/gömülmedi (proje
       talimatı: site internet olmadan da düzgün görünmeli, izinsiz/
       güvenilmez kaynaktan font indirilmez). Sırayla: kullanıcının
       sisteminde varsa modern/geometrik bir sans (Manrope, Plus Jakarta
       Sans) öncelik kazanır; yoksa yüksek kaliteli platform sistem
       fontlarına (Segoe UI Variable, San Francisco, Inter, Roboto) düşer.
       Tamamı Türkçe (İ ı Ş ş Ğ ğ Ç ç Ö ö Ü ü) karakterlerini tam destekler. */
    --ag-font: "Plus Jakarta Sans", "Manrope", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

    --ag-radius-sm: 10px;
    --ag-radius-md: 18px;
    --ag-radius-lg: 28px;
    --ag-radius-full: 999px;

    --ag-shadow-sm: 0 4px 16px rgba(10, 10, 11, 0.06);
    --ag-shadow-md: 0 16px 40px rgba(10, 10, 11, 0.10);
    --ag-shadow-lg: 0 30px 70px rgba(10, 10, 11, 0.16);

    --ag-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ag-container: 1240px;
}

/* ---------------------------------------------------------------------
   Reset (yalnızca .ag-site kapsayıcısı içinde etkili - admin'e sızmaz)
   --------------------------------------------------------------------- */
.ag-site {
    font-family: var(--ag-font);
    color: var(--ag-ink);
    background: var(--ag-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-synthesis: none;
}

.ag-site, .ag-site *, .ag-site *::before, .ag-site *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ag-site img { max-width: 100%; display: block; }
.ag-site a { color: inherit; text-decoration: none; }
.ag-site button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.ag-site ul { list-style: none; }
.ag-site svg { display: block; flex-shrink: 0; }

.ag-container {
    width: 100%;
    max-width: var(--ag-container);
    margin: 0 auto;
    padding: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
    .ag-site *, .ag-site *::before, .ag-site *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.ag-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    padding-top: 14px;
}

/* Üç kolonlu grid: sol=logo, orta=nav, sağ=görünmez denge alanı. İki dış
   kolon eşit "1fr" olduğu için (içerikleri farklı boyutta olsa da - sol
   kolonda logo var, sağ kolonda hiçbir grid item yok çünkü burger
   position:absolute ile grid akışının dışında kalır) nav her zaman
   viewport'un GERÇEK yatay merkezinde kalır, logo onu sağa kaydırmaz.

   Görsel "kutu": yarı şeffaf SİYAH cam (tam opak değil - arka plandaki
   sayfa hafifçe görünmeye devam eder), ince açık kenarlık, kontrollü
   blur, yumuşak gölge. Kırmızı yalnızca nav butonlarının kendi
   vurgu/hover tonlarında kullanılıyor, kutunun kendisinde YOK. Köşe
   yuvarlaklığı sitenin --ag-radius-lg token'ıyla tutarlı. */
.ag-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 20px;
    width: 100%;
    position: relative;
    height: 76px;
    border-radius: var(--ag-radius-lg);
    background: rgba(10, 10, 11, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    transition: height 260ms var(--ag-ease), box-shadow 260ms var(--ag-ease);
}

/* Kutunun alt kenarında çok ince, zarif kırmızı vurgu çizgisi - kenarlara
   kadar uzanmaz (12% inset), köşe yuvarlaklığına takılmadan ortada
   yumuşak bir gradient olarak biter. */
.ag-header__row::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224, 18, 28, 0.55), transparent);
    pointer-events: none;
}

/* Sayfa ~72px kaydırıldıktan sonra JS bu sınıfı ekler (bkz. site.js,
   rAF-throttled scroll listener) - kutu daha kompakt olur, logo/nav
   hafifçe küçülür. Metin kontrastı/okunabilirliği hiçbir durumda
   etkilenmez, yalnızca ölçüler değişir. */
.ag-header.is-compact .ag-header__row {
    height: 60px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
}

.ag-header__brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    border-radius: var(--ag-radius-sm);
}

.ag-header__brand img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    transition: width 220ms var(--ag-ease), height 220ms var(--ag-ease);
}

.ag-header.is-compact .ag-header__brand img {
    width: 32px;
    height: 32px;
}

.ag-header__brand:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 3px;
}

.ag-header__nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    transition: gap 220ms var(--ag-ease);
}

.ag-header.is-compact .ag-header__nav {
    gap: 6px;
}

/* Normal kategoriler sade/temiz metin (kutu YOK - şeffaf arka plan,
   şeffaf kenarlık). Yalnızca aktif kategori (.is-active) ince kırmızı
   kenarlıklı, hafif kırmızı/siyah kapsül alır (aşağıda). Metin/hedef/
   anchor/tıklama ve smooth-scroll davranışı DEĞİŞMEDİ, yalnızca görsel
   sunum değişti. Padding sabit tutulur ki hover/active'de arka plan
   belirdiğinde metin yerinden oynamasın (layout shift olmaz). */
.ag-header__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--ag-radius-full);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 200ms var(--ag-ease), border-color 200ms var(--ag-ease), color 200ms var(--ag-ease), height 220ms var(--ag-ease), padding 220ms var(--ag-ease), font-size 220ms var(--ag-ease);
}

.ag-header.is-compact .ag-header__nav a {
    height: 32px;
    padding: 0 10px;
    font-size: 12.5px;
}

.ag-header__nav a:hover {
    color: var(--ag-red);
    background: rgba(224, 18, 28, 0.12);
}

.ag-header__nav a:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 2px;
}

/* JS (site.js) kaydırma sırasında görünür bölüme karşılık gelen linke
   bu sınıfı ekler/kaldırır - tıklama/navigasyon davranışını etkilemez.
   Tek istisna: yalnızca bu durumda ince kırmızı kenarlıklı, hafif
   kırmızı/siyah karışık arka planlı yuvarlatılmış kapsül görünür. */
.ag-header__nav a.is-active {
    color: var(--ag-red);
    background: linear-gradient(135deg, rgba(224, 18, 28, 0.2), rgba(10, 10, 11, 0.35));
    border-color: rgba(224, 18, 28, 0.45);
}

.ag-header__burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ag-radius-full);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ag-header__burger svg { width: 22px; height: 22px; }
.ag-header__burger .ag-icon--close { display: none; }
.ag-header__burger.is-open .ag-icon--menu { display: none; }
.ag-header__burger.is-open .ag-icon--close { display: block; }

/* Mobil navigasyon artık header'ın kendi siyah cam diliyle tutarlı bir
   koyu floating popover - .ag-liquid-glass (sitenin geri kalanında
   kullanılan AÇIK/beyaz materyal) yerine kendi kendine yeten koyu cam
   tanımı kullanır, header kutusundaki bkz. .ag-header__row aynı
   background/blur/border/shadow mantığıyla. */
.ag-mobile-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 20px;
    z-index: 90;
    width: min(82vw, 300px);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 2px;
    background: rgba(10, 10, 11, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 240ms var(--ag-ease), transform 240ms var(--ag-ease), visibility 0ms 240ms;
    pointer-events: none;
}

.ag-mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 240ms var(--ag-ease), transform 240ms var(--ag-ease), visibility 0ms;
}

/* Masaüstü kategorileriyle aynı ilke: normal satır sade/temiz, yalnızca
   aktif kategori kırmızı kenarlıklı/karışık arka planlı kapsül olur. */
.ag-mobile-nav a {
    position: relative;
    z-index: 5;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 1px solid transparent;
    transition: background 160ms var(--ag-ease), border-color 160ms var(--ag-ease), color 160ms var(--ag-ease);
}

.ag-mobile-nav a:hover,
.ag-mobile-nav a:active {
    color: var(--ag-red);
    background: rgba(224, 18, 28, 0.16);
}

.ag-mobile-nav a:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: -2px;
}

.ag-mobile-nav a.is-active {
    color: var(--ag-red);
    background: linear-gradient(135deg, rgba(224, 18, 28, 0.22), rgba(10, 10, 11, 0.4));
    border-color: rgba(224, 18, 28, 0.4);
}

@media (max-width: 860px) {
    .ag-header__nav { display: none; }
    .ag-header__burger { display: flex; }

    /* KRİTİK: Masaüstünde header position:sticky ile viewport'a yapışıp
       kullanıcıyla birlikte kayar (istenen davranış budur). Mobilde bu
       KESİNLİKLE istenmiyor - logo/hamburger sayfanın başlangıç
       konumunda kalmalı, aşağı kaydırıldığında normal sayfa akışıyla
       birlikte ekranın üstünden çıkıp gitmeli. position:fixed de
       KULLANILMAZ. "relative" (offsetsiz, top:0 zaten no-op) kullanılır -
       static ile GÖRSEL olarak birebir aynıdır (viewport'a yapışmaz,
       sayfayla birlikte akar) ama .ag-mobile-nav'ın position:absolute
       konumlandırması hâlâ BU elemente göre hesaplanabilir. Doğrudan
       "static" kullanılırsa .ag-mobile-nav'ın "top: calc(100% + 10px)"
       değeri artık header'a değil documente göre hesaplanır ve panel
       sayfanın çok aşağısına, görünmez bir yere gider (menü "açılıyor"
       ama kategoriler hiçbir yerde görünmez hale gelirdi). */
    .ag-header {
        position: relative;
    }

    /* Mobilde header'ın arkasındaki siyah cam KUTUSU tamamen kaldırılır -
       yalnızca logo (solda) ve hamburger (sağda) görünür, aralarında
       görünür arka plan/kenarlık/gölge/blur olmayan gerçek şeffaf bir
       alan olur. Kompakt scroll durumunda da (bkz. .is-compact) mobilde
       ARKA PLAN/GÖLGE geri gelmez ve logo boyutu sabit kalır - masaüstü
       küçülme efekti mobile hiç taşınmaz. */
    .ag-header__row,
    .ag-header.is-compact .ag-header__row {
        height: 76px;
        background: transparent;
        border: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }

    .ag-header__row::after {
        display: none;
    }

    .ag-header.is-compact .ag-header__brand img {
        width: 40px;
        height: 40px;
    }

    /* Logo ve hamburger'a, arkalarına kutu koymadan, arka plandan bağımsız
       çift katmanlı ince bir "halo" gölgesi: hafif beyaz parıltı koyu
       içerik (ör. kamera video bölümü) üzerinde görünürlüğü sağlar, ince
       koyu gölge de açık/beyaz içerik üzerinde seçilebilirliği korur.
       Böylece header kutusu olmadan da ikon her koşulda okunaklı kalır. */
    .ag-header__brand img {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    }

    .ag-header__burger {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.85)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.ag-hero {
    padding: 96px 0 56px;
    text-align: center;
}

/* Artık gizli bir admin bağlantısı DEĞİL - sıradan, tıklanamayan bir
   rozet/etiket (<span>). Admin girişi footer'daki "Aras Güvenlik." linkine
   taşındı (bkz. .ag-footer__admin-link). Görsel tasarım (renk/boyut/
   spacing) tamamen aynı kaldı, yalnızca element türü <a> -> <span> oldu. */
.ag-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--ag-radius-full);
    background: var(--ag-red-light);
    color: var(--ag-red-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
    opacity: 0;
    animation: ag-fade-up 700ms var(--ag-ease) 60ms forwards;
}

.ag-hero__title {
    font-size: clamp(44px, 8.4vw, 118px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ag-black);
    opacity: 0;
    animation: ag-fade-up 900ms var(--ag-ease) 140ms forwards;
}

.ag-hero__title .ag-accent { color: var(--ag-red); }

.ag-hero__subtitle {
    max-width: 620px;
    margin: 26px auto 0;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.55;
    color: var(--ag-gray-600);
    font-weight: 500;
    opacity: 0;
    animation: ag-fade-up 900ms var(--ag-ease) 260ms forwards;
}

.ag-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 38px;
    flex-wrap: wrap;
    opacity: 0;
    animation: ag-fade-up 900ms var(--ag-ease) 360ms forwards;
}

.ag-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 26px;
    border-radius: var(--ag-radius-full);
    font-size: 15px;
    font-weight: 700;
    transition: transform 220ms var(--ag-ease), box-shadow 220ms var(--ag-ease), background 220ms var(--ag-ease);
}

.ag-btn svg { width: 18px; height: 18px; stroke-width: 2.3; }

.ag-btn--primary {
    background: var(--ag-red);
    color: var(--ag-white);
    box-shadow: 0 14px 30px -10px rgba(224, 18, 28, 0.55);
}

.ag-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -8px rgba(224, 18, 28, 0.6); }

.ag-btn--ghost {
    background: var(--ag-gray-100);
    color: var(--ag-black);
}

.ag-btn--ghost:hover { background: var(--ag-gray-200); transform: translateY(-2px); }

@keyframes ag-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   İnteraktif Kamera Bölümü
   --------------------------------------------------------------------- */
.ag-camera-section {
    padding: 20px 0 100px;
}

.ag-camera {
    position: relative;
    max-width: var(--ag-container);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    border-radius: var(--ag-radius-lg);
    overflow: hidden;
    background: #0b0c0e;
    box-shadow: var(--ag-shadow-lg);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
    transform: translateY(28px) scale(0.98);
}

.ag-camera.ag-is-visible {
    animation: ag-camera-in 900ms var(--ag-ease) forwards;
}

@keyframes ag-camera-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ag-camera.is-dragging { cursor: grabbing; }

/* Gerçek CCTV video akışı - sabit bir güvenlik kamerasının canlı görüntüsü
   hissi. Sürüklemeyle yalnızca çok küçük (birkaç %) bir kadraj kayması
   uygulanır (site.js) - panorama turu / fisheye kubbe YOK, düz ve geniş
   bir ekran. Hafif CCTV görüntü işleme filtresiyle modern IP kamera hissi
   verilir (aşırı VHS/korku filmi efekti yok). */
.ag-camera__feed {
    position: absolute;
    inset: -3%;
    width: 106%;
    height: 106%;
    object-fit: cover;
    will-change: transform;
    filter: grayscale(0.3) saturate(0.7) contrast(1.12) brightness(0.94);
    transition: transform 260ms var(--ag-ease);
}

.ag-camera__scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 3px);
    mix-blend-mode: multiply;
    opacity: 0.5;
}

.ag-camera__noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ag-camera__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
}

/* HUD */
.ag-camera__hud {
    position: absolute;
    inset: 0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.ag-camera__hud-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ag-camera__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 6px;
    background: rgba(10, 10, 11, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ag-camera__rec-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ag-red);
    animation: ag-blink 1.4s ease-in-out infinite;
}

@keyframes ag-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.ag-camera__clock {
    padding: 6px 11px;
    border-radius: 6px;
    background: rgba(10, 10, 11, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    animation: ag-clock-flicker 6s ease-in-out infinite;
}

@keyframes ag-clock-flicker {
    0%, 92%, 100% { opacity: 1; }
    94% { opacity: 0.78; }
    96% { opacity: 1; }
}

/* Bilgi paneli (HUD panel) - panorama gerçek fotoğraf üzerinde sürekli
   okunabilir kalması için sabit konumlanır; Pannellum'un yaw/pitch
   değerlerine göre yalnızca çok küçük, sınırlı bir parallax hareketi
   uygulanır (site.js) - asla taşmaz/kaybolmaz, okunabilirlik önceliklidir. */
/* Bilgi paneli - küçük, sol-alt köşede sabit, görüntünün büyük kısmını
   kapatmayan siyah cam panel. Beyaz metin + kırmızı küçük vurgu. */
.ag-camera__panel {
    pointer-events: auto;
    align-self: flex-start;
    max-width: 340px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(8, 8, 10, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 2px solid var(--ag-red);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    will-change: transform;
}

.ag-camera__panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ag-white);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.ag-camera__panel-title svg { width: 13px; height: 13px; color: var(--ag-red); stroke-width: 2.4; }

.ag-camera__panel-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}

@media (max-width: 640px) {
    .ag-camera { border-radius: 20px; aspect-ratio: 4 / 3; max-height: none; }
    .ag-camera__panel { max-width: 88%; padding: 12px 14px; }
    .ag-camera__panel-text { font-size: 11.5px; }
}

/* ---------------------------------------------------------------------
   Hizmetlerimiz
   --------------------------------------------------------------------- */
/* Hizmetler bölümü, cam kartların ARKASINDA gerçek ton/renk varyasyonu
   olan bir "atmosfer" sağlar - backdrop-filter'ın bulanıklaştıracağı
   gerçek içerik olmadan (düz beyaz zemin üstünde düz beyaz cam) glass
   etkisi görünmez, opak beyaz kutuya dönüşür. Blob'lar kullanıcıya
   görünür şekil olarak fark edilmemeli (yüksek blur, düşük opasite),
   yalnızca kartların içinden hafif bir ton değişimi hissettirmeli. */
.ag-services {
    position: relative;
    padding: 40px 0 110px;
    overflow: hidden;
}

/* Tek köşe blob'u yeterli değil - grid'in ortasındaki/sağındaki kartların
   arkasında blur edilecek hiçbir şey kalmıyor ve düz beyaz kutuya
   dönüyorlardı. Bunun yerine tüm bölüm boyunca (dikeyde de) yayılan,
   çok sayıda yumuşak ton bölgesi kullanılır - her kartın backdrop-filter'ı
   arkasında gerçek renk/ton varyasyonu bulur. */
.ag-services::before,
.ag-services::after {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    filter: blur(85px);
    pointer-events: none;
}

.ag-services::before {
    background:
        radial-gradient(480px 420px at 8% 6%, rgba(224, 18, 28, 0.05), transparent 68%),
        radial-gradient(460px 420px at 92% 30%, rgba(255, 60, 70, 0.035), transparent 68%),
        radial-gradient(520px 460px at 15% 68%, rgba(224, 18, 28, 0.045), transparent 68%);
}

.ag-services::after {
    background:
        radial-gradient(460px 420px at 88% 82%, rgba(224, 18, 28, 0.05), transparent 68%),
        radial-gradient(420px 380px at 45% 42%, rgba(255, 60, 70, 0.03), transparent 70%);
}

.ag-services .ag-container { position: relative; z-index: 1; }

.ag-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.ag-section-head__title {
    font-size: clamp(32px, 4.6vw, 54px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ag-black);
}

.ag-section-head__title .ag-accent { color: var(--ag-red); }

.ag-section-head__subtitle {
    margin-top: 14px;
    font-size: 16px;
    color: var(--ag-gray-600);
    font-weight: 500;
    line-height: 1.6;
}

.ag-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---------------------------------------------------------------------
   iOS/macOS tarzı translucent frosted-glass yüzeyler - hizmet kartları,
   iletişim butonları ve yorum kartlarının paylaştığı ortak tasarım dili.
   Referans: iPhone/iPad uygulama ikonlarının ve macOS/iOS floating
   control bar'larının camsı, nötr materyal hissi - Apple'ın asseti
   kopyalanmadı, yalnızca material mantığı (transparency + blur + iç
   highlight + ince kenarlık) uygulandı. Yüzey NÖTR: beyaz + çok hafif
   buz mavisi - kırmızı/pembe/bordo YOK. Marka kırmızısı yalnızca
   başlık vurgularında (.ag-accent) kullanılır.
   --------------------------------------------------------------------- */
/* Reusable Liquid Glass materyali - Figma "iOS 26 Liquid Glass" (Community)
   node-id=4-4 referans alınarak (bkz. proje final raporu: node'un ham
   Figma değerlerine bu ortamdan erişilemedi - Figma oturum açma zorunlu
   kıldı; bu yüzden burada KULLANICININ VERDİĞİ GÖRSEL REFERANS + bu
   dosyada tarif edilen materyal tanımı temel alınarak en yakın web
   implementasyonu üretildi, tahmini/uydurma "Apple değerleri" iddia
   edilmedi).

   Katmanlar (klasik tek-background glassmorphism DEĞİL):
   A) .ag-liquid-glass        -> düşük opasiteli translucent ana yüzey +
                                  backdrop-filter (blur + saturate +
                                  native SVG refraction filtresi).
   B) .ag-liquid-glass::before -> yön bağımlı kenar/iç highlight (üst-sol
                                  parlak, alt-sağ daha soğuk/koyu) - düz
                                  tek renkli border DEĞİL.
   C) .ag-liquid-glass::after  -> ikinci, daha geniş refraction/rim
                                  katmanı - alt kenarda hafif soğuk ton.
   İçerik (ikon/başlık/metin) bu katmanlardan tamamen bağımsız, keskin
   bir üst katmanda tutulur (position:relative; z-index:5) - hiçbir
   filtre/blur/displacement metne veya ikona uygulanmaz. */
.ag-liquid-glass {
    position: relative;
    isolation: isolate;
    border-radius: 30px;
    /* Squircle: destekleyen tarayıcılarda progressive enhancement,
       desteklemeyenlerde yukarıdaki border-radius fallback olarak kalır. */
    corner-shape: squircle;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(225, 240, 250, 0.08));
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    /* Standart backdrop-filter'da native SVG filtresi progressive
       enhancement olarak zincirlenir (yalnızca ARKA PLANA uygulanır) -
       Safari url() referansını yok sayıp yalnızca blur/saturate
       uygular, bu yüzden -webkit-backdrop-filter'da url() YOK
       (güvenli fallback). */
    backdrop-filter: url(#ag-refraction) blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(100, 130, 155, 0.16),
        inset -1px 0 0 rgba(100, 130, 155, 0.08),
        0 10px 26px rgba(40, 60, 85, 0.1);
    overflow: hidden;
    transition: transform 240ms var(--ag-ease), box-shadow 240ms var(--ag-ease), border-color 240ms var(--ag-ease);
}

/* Yön bağımlı iç highlight: üst-sol köşe parlak ışık kaynağı gibi
   davranır, sağ-alta doğru söner - düz beyaz plaka değil. */
.ag-liquid-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 12% -6%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.16) 30%, transparent 55%);
    pointer-events: none;
}

/* İkinci refraction/rim katmanı: alt kenarda hafif soğuk ton + sağ
   kenarda çok ince bir ışık kırılması hissi. */
.ag-liquid-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(140% 80% at 50% 120%, rgba(90, 120, 150, 0.16), transparent 62%),
        linear-gradient(100deg, transparent 88%, rgba(255, 255, 255, 0.3) 96%, transparent 100%);
    pointer-events: none;
}

.ag-liquid-glass:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 1px 0 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(100, 130, 155, 0.2),
        inset -1px 0 0 rgba(100, 130, 155, 0.1),
        0 14px 32px rgba(40, 60, 85, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
}

.ag-service-card {
    padding: 20px 22px;
    opacity: 0;
    transform: translateY(26px);
}

/* Renk-only override: hizmet kartlarının cam yüzeyi artık Telefon/
   WhatsApp butonlarıyla aynı hafif Aras kırmızısı tint ailesinde -
   soğuk/buz mavisi rgba(225,240,250,.08) üst değeri burada geçersiz
   kılınıyor. Yalnızca bu iki component'i hedefler; paylaşılan
   .ag-liquid-glass base'i (mobil menü, yorum kartları vb.) etkilemez.
   Geometri/blur/refraction/highlight/shadow sistemine dokunulmadı. */
.ag-service-card.ag-liquid-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(224, 18, 28, 0.08));
    border-color: rgba(224, 18, 28, 0.15);
}

.ag-service-card.ag-is-visible {
    animation: ag-fade-up 700ms var(--ag-ease) forwards;
}

.ag-service-card__icon,
.ag-service-card__title,
.ag-service-card__text {
    position: relative;
    z-index: 5;
}

.ag-service-card__icon {
    display: inline-flex;
    color: var(--ag-gray-800);
    margin-bottom: 13px;
    transition: transform 240ms var(--ag-ease);
}

.ag-service-card__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.6;
    filter: drop-shadow(0 3px 8px rgba(30, 50, 70, 0.14));
}

.ag-liquid-glass:hover .ag-service-card__icon { transform: scale(1.03); }

.ag-service-card__title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ag-black);
    margin-bottom: 8px;
}

.ag-service-card__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ag-ink);
    font-weight: 500;
}

@media (max-width: 992px) {
    .ag-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .ag-services__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Marka logoları şeridi (Hizmet Alanlarımız ile Bize Ulaşın arasında) -
   başlık/açıklama/buton YOK, yalnızca üç logo. .ag-services zaten büyük
   bir alt boşluk bırakıyor (padding-bottom: 110px) - bu yüzden bu sarmal
   kendi üst boşluğunu neredeyse hiç eklemez, yalnızca logolarla "Bize
   Ulaşın" başlığı arasında ölçülü bir alt boşluk sağlar.
   --------------------------------------------------------------------- */
.ag-service-logos-wrap {
    padding: 4px 0 44px;
}

.ag-service-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 48px;
    max-width: 720px;
    margin: 0 auto;
}

.ag-service-logo-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
}

/* "img.ag-service-logo-image" olarak yazılıyor çünkü global sıfırlama
   kuralı ".ag-site img { max-width: 100%; }" (element+class = 0,1,1)
   yalnızca ".ag-service-logo-image" (0,1,0) selector'ından daha yüksek
   özgüllüğe sahip - !important kullanmadan bunu geçersiz kılmak için
   aynı özgüllüğe (element+class) çıkarıp kaynak sırasıyla (daha sonra
   tanımlandığı için) kazanmasını sağlıyoruz. */
img.ag-service-logo-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 170px;
    max-height: 48px;
    object-fit: contain;
}

@media (max-width: 640px) {
    .ag-service-logos {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 28px;
        max-width: 220px;
    }

    .ag-service-logo-item {
        width: 100%;
        max-width: 220px;
        padding: 0;
    }

    img.ag-service-logo-image {
        max-width: 160px;
        max-height: 42px;
    }
}

/* ---------------------------------------------------------------------
   İletişim - dış kapsayıcı YOK; Telefon ve WhatsApp yalnızca kendi
   içeriğinin etrafını saran iki bağımsız, kompakt, nötr Apple-glass
   floating buton. Numara metin olarak görünmez, tüm buton tıklanabilir.
   --------------------------------------------------------------------- */
.ag-contact {
    padding: 0 0 90px;
}

.ag-contact .ag-section-head { margin-bottom: 30px; }

.ag-contact__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* İçerik ne kadar genişse buton o kadar geniş - sabit dev kart yok.
   Hizmet kartlarından farkı: burada yüzeyin KENDİSİ hafif kırmızı tint
   taşır (hizmet kartlarında yalnızca ARKA PLANDA atmosfer vardı, yüzey
   nötr kalıyordu) - böylece belirgin bir tıklanabilir buton hissi verir. */
.ag-contact-box {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    cursor: pointer;
}

.ag-contact-box.ag-liquid-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(224, 18, 28, 0.08));
    border: 1px solid rgba(224, 18, 28, 0.15);
}

.ag-contact-box.ag-liquid-glass:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 18, 28, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 1px 0 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(224, 18, 28, 0.12),
        0 10px 22px rgba(224, 18, 28, 0.14);
}

.ag-contact-box__icon,
.ag-contact-box__label {
    position: relative;
    z-index: 5;
}

.ag-contact-box__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-gray-800);
    transition: transform 240ms var(--ag-ease);
}

.ag-liquid-glass:hover .ag-contact-box__icon { transform: scale(1.06); }

.ag-contact-box__icon svg { width: 24px; height: 24px; stroke-width: 2; }

.ag-contact-box__label {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ag-black);
    white-space: nowrap;
}

/* Telefon/WhatsApp mobilde de HER ZAMAN yan yana kalır (alt alta
   düşmez) - dar ekranlarda yalnızca padding/font/icon/gap küçülür. */
@media (max-width: 480px) {
    .ag-contact__grid {
        width: calc(100% - 32px);
        max-width: 420px;
        margin: 0 auto;
        gap: 10px;
    }

    .ag-contact-box {
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
        padding: 12px 14px;
    }

    .ag-contact-box__icon { width: 24px; height: 24px; }
    .ag-contact-box__icon svg { width: 19px; height: 19px; }
    .ag-contact-box__label { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   Vizyonumuz / Misyonumuz - "Bize Ulaşın" ile "Adresimiz" arasında,
   hizmet kartlarıyla aynı sıcak-kırmızı tint override desenini
   (.ag-liquid-glass base'i bozmadan) kullanan iki eşit kart.
   --------------------------------------------------------------------- */
.ag-mission {
    padding: 0 0 90px;
}

.ag-mission .ag-section-head { margin-bottom: 30px; }

.ag-mission__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ag-mission-card {
    padding: 34px 30px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(224, 18, 28, 0.07));
    border-color: rgba(224, 18, 28, 0.14);
}

.ag-mission-card__title,
.ag-mission-card__text {
    position: relative;
    z-index: 5;
}

.ag-mission-card__title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ag-black);
    margin-bottom: 12px;
}

.ag-mission-card__text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ag-ink);
    font-weight: 500;
}

@media (max-width: 720px) {
    .ag-mission__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Adresimiz / Harita
   --------------------------------------------------------------------- */
.ag-location {
    padding: 0 0 110px;
}

/* "Adresimiz" başlığının hemen altındaki tıklanabilir açık adres -
   mevcut .ag-section-head__subtitle tipografisiyle birebir aynı
   (boyut/renk/ağırlık), yalnızca <a> olduğu için display:block +
   hover/focus durumları eklendi. Tüm metin (adresin tamamı) tek bir
   <a> içinde olduğu için tamamen tıklanabilir. */
.ag-location__address-link {
    display: block;
    margin-top: 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ag-gray-600);
    word-break: break-word;
    transition: color 180ms var(--ag-ease);
}

.ag-location__address-link:hover,
.ag-location__address-link:focus-visible {
    color: var(--ag-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ag-location__address-link:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 3px;
    border-radius: 4px;
}

.ag-location__map {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: var(--ag-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ag-gray-200);
    box-shadow: var(--ag-shadow-sm);
}

.ag-location__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.ag-location__info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 640px;
    margin: 26px auto 0;
    text-align: left;
    padding: 20px 22px;
    border-radius: var(--ag-radius-md);
    background: var(--ag-gray-50);
    border: 1px solid var(--ag-gray-200);
}

.ag-location__info svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--ag-red);
    stroke-width: 2;
    margin-top: 2px;
}

.ag-location__info-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ag-black);
    margin-bottom: 4px;
}

.ag-location__info-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ag-gray-600);
    font-weight: 500;
}

.ag-location__directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ag-red);
}

.ag-location__directions svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .ag-location__map { height: 320px; }
}

/* ---------------------------------------------------------------------
   Müşteri Yorumları
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Referanslarımız - "Müşteri Yorumları" bölümünün üstünde, yönetim
   panelinden (admin/references.php) beslenen yatay kayan referans firma
   şeridi. Ağır bir kütüphane KULLANILMAZ (madde: hafif vanilla CSS/JS) -
   otomatik kayma assets/site/js/site.js içinde requestAnimationFrame ile,
   elle kaydırma native overflow-x: auto ile sağlanır.
   --------------------------------------------------------------------- */
.ag-references { margin-bottom: 30px; }

.ag-references__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 6px 10px;
    scrollbar-width: none;
    cursor: default;
    justify-content: center;
}

/* Kartlar konteynere sığmıyorsa (site.js ölçüp .is-overflowing ekler) -
   yatay kaydırma/otomatik hareket etkinleşir, elle sürüklenebilir olduğu
   için "grab" imleci gösterilir. Sığıyorsa (varsayılan) kartlar
   sarmalanmadan ortalanır, kaydırma/otomatik hareket yoktur
   (flex-wrap her zaman nowrap kalır ki scrollWidth ölçümü doğru olsun). */
.ag-references__track.is-overflowing {
    cursor: grab;
    justify-content: flex-start;
}

.ag-references__track.is-overflowing:active { cursor: grabbing; }
.ag-references__track::-webkit-scrollbar { display: none; }

.ag-reference-card {
    flex: 0 0 auto;
    width: 172px;
    padding: 20px 14px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.ag-reference-card__logo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--ag-white);
    box-shadow: var(--ag-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 14px;
}

.ag-reference-card__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ag-reference-card__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ag-gray-800);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
}

@media (max-width: 640px) {
    .ag-reference-card { width: 148px; padding: 16px 10px; }
    .ag-reference-card__logo { width: 88px; height: 88px; padding: 10px; }
}

.ag-reviews { padding: 0 0 110px; }

.ag-reviews__track-wrap { position: relative; }

.ag-reviews__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 6px 18px;
    scrollbar-width: none;
}

.ag-reviews__track::-webkit-scrollbar { display: none; }

.ag-review-card {
    position: relative;
    scroll-snap-align: start;
    flex: 0 0 min(340px, 84vw);
    padding: 24px 22px;
    border-radius: 24px;
}

.ag-review-card__badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: var(--ag-radius-full);
    background: rgba(30, 50, 70, 0.08);
    color: var(--ag-gray-600);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ag-review-card__stars {
    display: flex;
    gap: 3px;
    color: var(--ag-red);
    margin-bottom: 14px;
}

.ag-review-card__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

.ag-review-card__text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ag-gray-800);
    font-weight: 500;
    margin-bottom: 18px;
    min-height: 96px;
}

.ag-review-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ag-review-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ag-black);
    color: var(--ag-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.ag-review-card__name { font-size: 14px; font-weight: 700; color: var(--ag-black); }
.ag-review-card__source { font-size: 12px; color: var(--ag-gray-400); font-weight: 600; }

.ag-reviews__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.ag-reviews__nav button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ag-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms var(--ag-ease);
}

.ag-reviews__nav button:hover { background: var(--ag-gray-200); }
.ag-reviews__nav svg { width: 18px; height: 18px; }

.ag-reviews__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ag-gray-800);
}

.ag-reviews__rating .ag-review-card__stars { margin: 0; }

/* ---------------------------------------------------------------------
   Sağda sabit "en alta in" butonu - href="#site-footer" kullandığı için
   mevcut genel smooth-scroll handler'ı (site.js, a[href^="#"] seçicisi)
   otomatik olarak kapsar; ayrı/çakışan bir scroll listener'ı YOKTUR.
   Yalnızca site.js'te Space tuşu desteği ve footer görünürken hafifçe
   gizlenme davranışı eklenir (bkz. .is-hidden).
   --------------------------------------------------------------------- */
.ag-back-to-bottom {
    position: fixed;
    right: 22px;
    bottom: 28px;
    z-index: 80;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-red-dark);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(224, 18, 28, 0.1));
    border-color: rgba(224, 18, 28, 0.2);
    box-shadow: 0 8px 22px rgba(224, 18, 28, 0.16);
    transition: opacity 220ms var(--ag-ease), transform 220ms var(--ag-ease), background 200ms var(--ag-ease), border-color 200ms var(--ag-ease), box-shadow 200ms var(--ag-ease);
}

.ag-back-to-bottom svg {
    position: relative;
    z-index: 5;
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

.ag-back-to-bottom:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(224, 18, 28, 0.17));
    border-color: rgba(224, 18, 28, 0.36);
    color: var(--ag-red);
}

.ag-back-to-bottom:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 3px;
}

/* Footer görünürken (IntersectionObserver, site.js) hafifçe gizlenir -
   DOM'dan/tab sırasından çıkarılmaz, yalnızca opak/tıklanamaz yapılır. */
.ag-back-to-bottom.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .ag-back-to-bottom {
        right: 14px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 46px;
        height: 46px;
    }

    .ag-back-to-bottom svg { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.ag-footer {
    padding: 64px 0 0;
    background: var(--ag-gray-50);
    border-top: 1px solid var(--ag-gray-200);
}

.ag-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
    text-align: left;
}

.ag-footer__col-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ag-black);
    margin: 0 0 16px;
}

.ag-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ag-footer__brand img {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
}

.ag-footer__brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ag-black);
}

.ag-footer__brand-text {
    max-width: 320px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ag-gray-600);
    font-weight: 500;
}

.ag-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ag-footer__links a {
    display: inline-block;
    width: fit-content;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ag-gray-600);
    transition: color 180ms var(--ag-ease);
}

.ag-footer__links a:hover,
.ag-footer__links a:focus-visible {
    color: var(--ag-red);
}

.ag-footer__links a:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 3px;
    border-radius: 3px;
}

.ag-footer__phone {
    font-size: 14px;
    font-weight: 700;
    color: var(--ag-black);
    margin: 0 0 14px;
}

.ag-footer__contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ag-footer__contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--ag-radius-full);
    font-size: 13px;
    font-weight: 700;
    color: var(--ag-red-dark);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(224, 18, 28, 0.08));
    border: 1px solid rgba(224, 18, 28, 0.16);
    transition: background 180ms var(--ag-ease), border-color 180ms var(--ag-ease), color 180ms var(--ag-ease), transform 180ms var(--ag-ease);
}

.ag-footer__contact-btn svg { width: 15px; height: 15px; stroke-width: 2.2; }

.ag-footer__contact-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(224, 18, 28, 0.14));
    border-color: rgba(224, 18, 28, 0.3);
    color: var(--ag-red);
    transform: translateY(-1px);
}

.ag-footer__contact-btn:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 2px;
}

.ag-footer__bottom {
    border-top: 1px solid var(--ag-gray-200);
    padding: 22px 0 34px;
    text-align: center;
}

@media (max-width: 900px) {
    .ag-footer__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
    }

    .ag-footer__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .ag-footer__grid {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .ag-footer__brand-text {
        max-width: none;
    }
}

.ag-footer__copy {
    font-size: 13.5px;
    color: var(--ag-gray-600);
    font-weight: 600;
}

.ag-footer__by {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ag-gray-400);
    font-weight: 600;
}

.ag-footer__by a {
    color: var(--ag-gray-600);
    font-weight: 700;
    transition: color 180ms var(--ag-ease);
}

.ag-footer__by a:hover { color: var(--ag-red); }

/* Gizli admin giriş noktası: yalnızca "Aras Güvenlik." kelimesi (nokta
   dahil) tıklanabilir. Normal görünümde footer metninden aşırı
   ayrışmaz (rengi kalıtımla aynı kalır) - yalnızca hover/focus'ta çok
   hafif kırmızı vurgu + alt çizgi belirir. */
.ag-footer__admin-link {
    color: inherit;
    text-decoration: none;
    transition: color 180ms var(--ag-ease);
}

.ag-footer__admin-link:hover {
    color: var(--ag-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ag-footer__admin-link:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------
   Scroll-reveal utility (JS toggles .ag-is-visible)
   --------------------------------------------------------------------- */
.ag-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ag-ease), transform 700ms var(--ag-ease);
}

.ag-reveal.ag-is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ag-reveal, .ag-hero__eyebrow, .ag-hero__title, .ag-hero__subtitle, .ag-hero__actions, .ag-camera, .ag-service-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .ag-liquid-glass:hover { transform: none !important; }
    .ag-camera__panel { transition: none !important; }
    .ag-camera__clock { animation: none !important; }
    .ag-camera__rec-dot { animation: none !important; }
}

/* Mobilde backdrop-filter maliyeti yüksek olduğu için blur seviyesi
   düşürülür - ancak nötr translucent glass tasarım korunur, düz beyaz
   kutuya dönmez. */
@media (max-width: 640px) {
    .ag-liquid-glass {
        -webkit-backdrop-filter: blur(11px) saturate(150%);
        backdrop-filter: blur(11px) saturate(150%);
    }

    .ag-services::before,
    .ag-services::after {
        filter: blur(60px);
    }
}

/* ---------------------------------------------------------------------
   Section spacing rhythm on small screens
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .ag-container { padding: 0 18px; }
    .ag-hero { padding: 64px 0 40px; }
    .ag-camera-section { padding: 10px 0 70px; }
    .ag-services { padding: 20px 0 76px; }
    .ag-contact, .ag-mission, .ag-location, .ag-reviews { padding-bottom: 76px; }
    .ag-section-head { margin-bottom: 36px; }
}

/* ---------------------------------------------------------------------
   Ana sayfa galeri önizlemesi (marka logoları ile "Bize Ulaşın" arası) -
   sabit 3 görsel (gallery-01..03), DB'siz. Kart yüzeyi mevcut
   .ag-liquid-glass deseniyle uyumlu; tıklanınca /galeri.php'ye gider.
   --------------------------------------------------------------------- */
.ag-gallery-preview {
    padding: 4px 0 88px;
}

.ag-gallery-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ag-gallery-preview__card {
    display: block;
    border-radius: var(--ag-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.ag-gallery-preview__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms var(--ag-ease, ease);
}

.ag-gallery-preview__card:hover img,
.ag-gallery-preview__card:focus-visible img {
    transform: scale(1.05);
}

.ag-gallery-preview__card:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 3px;
}

.ag-gallery-preview__cta {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

@media (max-width: 860px) {
    .ag-gallery-preview__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ag-gallery-preview__grid .ag-gallery-preview__card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .ag-gallery-preview__grid {
        grid-template-columns: 1fr;
    }

    .ag-gallery-preview__grid .ag-gallery-preview__card:last-child {
        grid-column: auto;
    }
}

/* ---------------------------------------------------------------------
   Galeri sayfası (galeri.php) - 7 sabit görsel, ızgara + lightbox
   --------------------------------------------------------------------- */
.ag-gallery-page {
    padding: 56px 0 96px;
}

.ag-gallery-page__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}

.ag-gallery-page__title {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.ag-gallery-page__subtitle {
    color: var(--ag-gray-600, #5b6270);
    font-size: 16px;
    line-height: 1.6;
}

.ag-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ag-gallery-grid__item {
    display: block;
    width: 100%;
    padding: 0;
    border-radius: var(--ag-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

.ag-gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms var(--ag-ease, ease);
}

.ag-gallery-grid__item:hover img,
.ag-gallery-grid__item:focus-visible img {
    transform: scale(1.05);
}

.ag-gallery-grid__item:focus-visible {
    outline: 2px solid var(--ag-red);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .ag-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .ag-gallery-grid { grid-template-columns: 1fr; }
    .ag-gallery-page { padding: 40px 0 72px; }
}

/* Lightbox - <dialog> tabanlı, harici kütüphane yok */
.ag-lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(94vw, 1200px);
    max-height: 92vh;
    margin: auto;
}

.ag-lightbox::backdrop {
    background: rgba(10, 10, 12, 0.86);
    backdrop-filter: blur(4px);
}

.ag-lightbox__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.ag-lightbox__img {
    max-width: min(94vw, 1200px);
    max-height: 92vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

.ag-lightbox__close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ag-red);
    color: var(--ag-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5);
}

.ag-lightbox__close:hover { transform: scale(1.06); }

.ag-lightbox__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ag-lightbox__close svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
    .ag-lightbox__close {
        top: 10px;
        right: 10px;
    }
}