/* ========================================================
   AFYON KAYA OTO KURTARMA - ULTRA PREMIUM THEME 2.0
   ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --brand-primary: #c2410c;    /* Vivid Orange */
    --brand-gradient: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    --brand-dark: #111827;       /* Rich Black */
    --brand-surface: #ffffff;
    --brand-bg: #f8fafc;
    --text-main: #334155;
    --text-muted: #64748b;
    --border-soft: rgba(0,0,0,0.05);
    
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.04);
    --shadow-hover: 0 10px 40px rgba(249, 115, 22, 0.15);
    --radius-lg: 16px;
    --radius-xl: 24px;
}

body {
    font-family: 'Outfit', sans-serif !important;
    background-color: var(--brand-bg);
    color: var(--text-main);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Typography Refinements - Not too massive, but highly readable */
h1, h2, h3, h4 { color: var(--brand-dark); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 20px; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 15px; }
p { font-size: 1.05rem; font-weight: 400; }

/* Premium Container */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Premium Buttons */
.btn-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--brand-gradient); color: white !important; font-weight: 700; font-size: 1.1rem;
    padding: 14px 32px; border-radius: 99px; text-decoration: none; border: none;
    box-shadow: 0 6px 20px rgba(249,115,22,0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.btn-premium:hover {
    transform: translateY(-3px); box-shadow: 0 10px 30px rgba(249,115,22,0.4);
}
.btn-outline-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: transparent; color: var(--brand-primary) !important; font-weight: 700; font-size: 1.1rem;
    padding: 12px 30px; border-radius: 99px; text-decoration: none; border: 2px solid var(--brand-primary);
    transition: all 0.3s ease;
}
.btn-outline-premium:hover { background: rgba(249,115,22,0.05); transform: translateY(-2px); }

/* Premium Grid & Cards (Fixing "Too big/simple" issue) */
.premium-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px;
}
.premium-card {
    background: var(--brand-surface); padding: 35px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft);
    transition: all 0.4s ease; position: relative; z-index: 1;
}
.premium-card:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(249,115,22,0.2);
}
.premium-card-icon {
    width: 50px; height: 50px; background: rgba(249,115,22,0.1); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 20px;
}

/* Hero Section (Sleek, modern) */
.premium-hero {
    padding: 140px 20px 80px;
    background: linear-gradient(180deg, #ffffff 0%, var(--brand-bg) 100%);
    position: relative; overflow: hidden;
}
.premium-hero::before {
    content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, rgba(255,255,255,0) 70%); z-index: 0;
}
.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(249,115,22,0.1); color: var(--brand-primary);
    padding: 6px 16px; border-radius: 99px; font-weight: 700; font-size: 0.9rem; margin-bottom: 20px;
}

/* ========================================================
   FLOATING DESKTOP ACTIONS (Right Bottom)
   ======================================================== */
.desktop-float-actions {
    position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999;
}
.float-btn {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative;
}
.float-btn:hover { transform: scale(1.1) translateY(-5px); }
.float-btn .tooltip {
    position: absolute; right: 75px; background: var(--brand-dark); color: white; padding: 6px 12px;
    border-radius: 8px; font-size: 0.85rem; font-weight: 600; opacity: 0; pointer-events: none;
    transform: translateX(10px); transition: 0.3s; white-space: nowrap;
}
.float-btn:hover .tooltip { opacity: 1; transform: translateX(0); }
.btn-wa { background: #25D366; }
.btn-wa:hover { box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3); }
.btn-call { background: var(--brand-gradient); }
.btn-call:hover { box-shadow: 0 15px 30px rgba(249, 115, 22, 0.3); }

/* ========================================================
   NATIVE-APP STYLE MOBILE BOTTOM BAR
   ======================================================== */
.mobile-app-bar { display: none; }
@media (max-width: 768px) {
    .desktop-float-actions { display: none; } /* Hide desktop floaters on mobile */
    body { padding-bottom: 80px; } /* Prevent footer overlap */
    .mobile-app-bar {
        display: grid; grid-template-columns: 1fr 1fr 1fr;
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: rgba(255,255,255,0.98); backdrop-filter: blur(10px);
        box-shadow: 0 -5px 25px rgba(0,0,0,0.08); z-index: 10000;
        padding: 10px 10px 20px 10px; /* Extra bottom padding for iOS swipe area */
        border-top: 1px solid var(--border-soft);
    }
    .app-bar-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        color: var(--text-muted); text-decoration: none; font-size: 0.75rem; font-weight: 600;
        transition: 0.3s;
    }
    .app-bar-item.active { color: var(--brand-primary); }
    .app-bar-item svg { width: 22px; height: 22px; stroke-width: 2; }
    
    .app-bar-main {
        position: relative; top: -15px; background: var(--brand-gradient); color: white !important;
        width: 65px; height: 65px; border-radius: 50%; display: flex; flex-direction: column;
        align-items: center; justify-content: center; margin: 0 auto;
        box-shadow: 0 10px 25px rgba(249,115,22,0.4); border: 4px solid white;
    }
    .app-bar-main svg { width: 28px; height: 28px; }
}

/* ========================================================
   FAQ / EEAT REFINEMENTS
   ======================================================== */
.expert-note-box { border-radius: var(--radius-lg); border: none !important; box-shadow: inset 0 0 0 1px rgba(249,115,22,0.2); }
.eeat-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); }

/* Global Focus Visible (A11y Keyboard Navigation) */
*:focus-visible {
    outline: 3px solid var(--primary, #c2410c) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(194, 65, 12, 0.2) !important;
    border-radius: 4px;
    transition: outline-offset 0.2s ease;
}

/* Link Affordance (A11y Visual Cues) */
p a, .article-content a, .footer a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(194, 65, 12, 0.4);
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
p a:hover, .article-content a:hover, .footer a:hover {
    text-decoration-color: var(--primary, #c2410c);
    color: var(--primary, #c2410c);
}
/* Ensure buttons and cards which act as links don't get the text underline */
a.btn, a.btn-premium, a.btn-outline-premium, a.float-btn, .premium-card a, a.mb-wa {
    text-decoration: none !important;
}
.premium-card a:hover {
    text-decoration: none !important;
}

/* ========================================================
   AFYON KAYA OTO KURTARMA - ULTRA PREMIUM THEME 2.0
   ======================================================== */
:root {
    --brand-primary: #c2410c;    /* Vivid Orange */
    --brand-gradient: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    --brand-dark: #111827;       /* Rich Black */
    --brand-surface: #ffffff;
    --brand-bg: #f8fafc;
    --text-main: #334155;
    --text-muted: #64748b;
    --border-soft: rgba(0,0,0,0.05);
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.04);
    --shadow-hover: 0 10px 40px rgba(249, 115, 22, 0.15);
    --radius-lg: 16px;
    --radius-xl: 24px;
}
body {
    font-family: 'Outfit', sans-serif !important;
    background-color: var(--brand-bg);
    color: var(--text-main);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}
/* Typography Refinements - Not too massive, but highly readable */
h1, h2, h3, h4 { color: var(--brand-dark); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 20px; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 15px; }
p { font-size: 1.05rem; font-weight: 400; }
/* Premium Container */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
/* Premium Buttons */
.btn-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--brand-gradient); color: white !important; font-weight: 700; font-size: 1.1rem;
    padding: 14px 32px; border-radius: 99px; text-decoration: none; border: none;
    box-shadow: 0 6px 20px rgba(249,115,22,0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.btn-premium:hover {
    transform: translateY(-3px); box-shadow: 0 10px 30px rgba(249,115,22,0.4);
}
.btn-outline-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: transparent; color: var(--brand-primary) !important; font-weight: 700; font-size: 1.1rem;
    padding: 12px 30px; border-radius: 99px; text-decoration: none; border: 2px solid var(--brand-primary);
    transition: all 0.3s ease;
}
.btn-outline-premium:hover { background: rgba(249,115,22,0.05); transform: translateY(-2px); }
/* Premium Grid & Cards (Fixing "Too big/simple" issue) */
.premium-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px;
}
.premium-card {
    background: var(--brand-surface); padding: 35px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft);
    transition: all 0.4s ease; position: relative; z-index: 1;
}
.premium-card:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(249,115,22,0.2);
}
.premium-card-icon {
    width: 50px; height: 50px; background: rgba(249,115,22,0.1); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 20px;
}
/* Hero Section (Sleek, modern) */
.premium-hero {
    padding: 140px 20px 80px;
    background: linear-gradient(180deg, #ffffff 0%, var(--brand-bg) 100%);
    position: relative; overflow: hidden;
}
.premium-hero::before {
    content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, rgba(255,255,255,0) 70%); z-index: 0;
}
.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(249,115,22,0.1); color: var(--brand-primary);
    padding: 6px 16px; border-radius: 99px; font-weight: 700; font-size: 0.9rem; margin-bottom: 20px;
}
/* ========================================================
   FLOATING DESKTOP ACTIONS (Right Bottom)
   ======================================================== */
.desktop-float-actions {
    position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999;
}
.float-btn {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative;
}
.float-btn:hover { transform: scale(1.1) translateY(-5px); }
.float-btn .tooltip {
    position: absolute; right: 75px; background: var(--brand-dark); color: white; padding: 6px 12px;
    border-radius: 8px; font-size: 0.85rem; font-weight: 600; opacity: 0; pointer-events: none;
    transform: translateX(10px); transition: 0.3s; white-space: nowrap;
}
.float-btn:hover .tooltip { opacity: 1; transform: translateX(0); }
.btn-wa { background: #25D366; }
.btn-wa:hover { box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3); }
.btn-call { background: var(--brand-gradient); }
.btn-call:hover { box-shadow: 0 15px 30px rgba(249, 115, 22, 0.3); }
/* ========================================================
   NATIVE-APP STYLE MOBILE BOTTOM BAR
   ======================================================== */
.mobile-app-bar { display: none; }
@media (max-width: 768px) {
    .desktop-float-actions { display: none; } /* Hide desktop floaters on mobile */
    body { padding-bottom: 80px; } /* Prevent footer overlap */
    .mobile-app-bar {
        display: grid; grid-template-columns: 1fr 1fr 1fr;
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: rgba(255,255,255,0.98); backdrop-filter: blur(10px);
        box-shadow: 0 -5px 25px rgba(0,0,0,0.08); z-index: 10000;
        padding: 10px 10px 20px 10px; /* Extra bottom padding for iOS swipe area */
        border-top: 1px solid var(--border-soft);
    }
    .app-bar-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        color: var(--text-muted); text-decoration: none; font-size: 0.75rem; font-weight: 600;
        transition: 0.3s;
    }
    .app-bar-item.active { color: var(--brand-primary); }
    .app-bar-item svg { width: 22px; height: 22px; stroke-width: 2; }
    .app-bar-main {
        position: relative; top: -15px; background: var(--brand-gradient); color: white !important;
        width: 65px; height: 65px; border-radius: 50%; display: flex; flex-direction: column;
        align-items: center; justify-content: center; margin: 0 auto;
        box-shadow: 0 10px 25px rgba(249,115,22,0.4); border: 4px solid white;
    }
    .app-bar-main svg { width: 28px; height: 28px; }
}
/* ========================================================
   FAQ / EEAT REFINEMENTS
   ======================================================== */
.expert-note-box { border-radius: var(--radius-lg); border: none !important; box-shadow: inset 0 0 0 1px rgba(249,115,22,0.2); }
.eeat-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); }
    /* Premium Hero Badges & Layout */
    .ultra-hero { position: relative; padding: 160px 0 80px 0; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); overflow: hidden; }
    .ultra-hero::before { content: ''; position: absolute; right: -10%; top: -10%; width: 50%; height: 70%; background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; }
    .hero-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
    .live-status { display: inline-flex; align-items: center; gap: 8px; background: rgba(34,197,94,0.1); color: #16a34a; padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: 0.9rem; margin-bottom: 20px; border: 1px solid rgba(34,197,94,0.2); }
    @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(3); opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
    .pulse-dot { position: relative; width: 8px; height: 8px; background: #16a34a; border-radius: 50%; }
    .pulse-dot::after { content: ''; position: absolute; inset: 0; background: inherit; border-radius: 50%; animation: pulse 2s infinite; }
    .hero-media-wrapper { position: relative; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
    .hero-media-wrapper img { width: 100%; height: 500px; object-fit: cover; border-radius: 24px; border: 4px solid #fff; }
    /* Floating Badges */
    .float-badge { position: absolute; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; gap: 12px; z-index: 10; animation: float 6s ease-in-out infinite; }
    .float-badge.top-right { top: -20px; right: -20px; animation-delay: 0s; }
    .float-badge.bottom-left { bottom: 30px; left: -30px; border-left: 4px solid #c2410c; animation-delay: 3s; }
    @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
    .badge-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #c2410c, #ea580c); display: flex; align-items: center; justify-content: center; color: white; }
    /* Stats Strip */
    .stats-strip { background: #111827; padding: 40px 0; color: white; margin-top: -30px; position: relative; z-index: 20; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 20px; }
    .stat-number { font-size: 2.5rem; font-weight: 900; color: #c2410c; display: block; line-height: 1; margin-bottom: 5px; }
    /* Overlapping About Section */
    .about-overlap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; position: relative; }
    .about-img-1 { height: 250px; border-radius: 20px; border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .about-img-2 { height: 350px; border-radius: 20px; border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-top: -50px; z-index: 2; position: relative; }
    .exp-badge { grid-column: 1 / -1; background: white; padding: 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(249,115,22,0.1); text-align: center; border: 1px solid rgba(249,115,22,0.2); transform: translateY(-30px); z-index: 3; position: relative; display: flex; justify-content: space-around; }
    @media (max-width: 991px) {
      .hero-layout { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .float-badge.top-right { right: 10px; top: 10px; }
      .float-badge.bottom-left { left: 10px; bottom: 10px; }
      .about-img-2 { margin-top: 0; }
    }
    .section-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -1px; margin-bottom: 20px; color: #111827; }
    .section-title span { color: #c2410c; }
    .glass-header { position: fixed; top: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); padding: 15px 0; }
/* Global Focus Visible (A11y Keyboard Navigation) */
*:focus-visible {
    outline: 3px solid var(--primary, #c2410c) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(194, 65, 12, 0.2) !important;
    border-radius: 4px;
    transition: outline-offset 0.2s ease;
}
/* Link Affordance (A11y Visual Cues) */
p a, .article-content a, .footer a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(194, 65, 12, 0.4);
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
p a:hover, .article-content a:hover, .footer a:hover {
    text-decoration-color: var(--primary, #c2410c);
    color: var(--primary, #c2410c);
}
/* Ensure buttons and cards which act as links don't get the text underline */
a.btn, a.btn-premium, a.btn-outline-premium, a.float-btn, .premium-card a, a.mb-wa {
    text-decoration: none !important;
}
.premium-card a:hover {
    text-decoration: none !important;
}

img { max-width: 100%; height: auto; }