/*-------------------------------------
+ Import Font
+ General Layout
+ Typography
+ Page Title
+ Helper Classes
+ Preloader
+ UI - buttons
+ UI - badges & Waves
+ UI - Colors
+ UI - Toasts
+ UI - Modal
+ UI - Grid
+ UI - Icons
+ Form Select
+ Dropdowns
+ Mediabox
+ Date picker
+ Time picker
+ Feature Discovery
+ Carousel
+ Carousel Home Screen
+ Slider
+ Testimonials
+ Floating action buttons
+ Tooltip
+ Highlight
+ Breadcrumbs
+ Buttons
+ Badges
+ Blockquote
+ Pagination
+ Spineers / preloaders
+ Carousel Basic
+ Accordion
+ Waves
+ Modal
+ Page Top Bar
+ Page Top Bar - Left Align
+ Page Top Bar - App Based
+ Page Top Bar - Right Aligned
+ Page Top Bar - Dark Style
+ Page Top Bar - Colored Style
+ Navigation Menu
+ Navigation Menu - Centered 
+ Navigation Menu - Dark Style
+ Navigation Menu - Colored Style
+ Sub pages - Inner Menu Links
+ Footer
+ Footer - Light Style
+ Footer - Colored Style
+ Footer - Minimal
+ Navigation User Menu
+ Drop Down
+ Collection
+ Progress Bars
+ Back to top button
+ Cards
+ Tabs
+ Icon Boxes
+ Chips
+ Form Range Sliders
+ Switches
+ Form Elements
+ Checkboxes
+ Radio Buttons
+ Select
+ Settings
+ Parallax
+ Masonry
+ Cards Wrap
+ Chat
+ Calendar
+ Events
+ Mailbox / Messages
+ Profile Page
+ Timeline
+ Portfolio
+ Blogs
+ Blogs - Aligned
+ Blogs - Small Left Style
+ Blogs - Medium Left Style
+ Blogs - Small Right Style
+ Blogs - Medium Right Style
+ Blogs - Small Alternate Style
+ Blogs - Medium Alternate Style
+ Blogs - Non Image
+ Login Page
+ Welcome page
+ Error Pages 
+ Search Page 
+ Pricing Tables
+ Invoice
+ Notifications
+ Edit Profile
+ App Settings
+ Clients
+ Fixed Footer Menu
+ Fixed Footer Menu - Dark Style
+ Fixed Footer Menu - Colored Style
+ Perfect Scrollbar
+ Table
+ Contact us page
+ Fancybox
+ Image Filter Overlay
+ Site - Dark Mode
+ Site - Dark Mode - Calendar
+ Site - Dark Mode - Events
+ Site - Dark Mode - Collections
+ Site - Dark Mode - Chat
+ Site - Dark Mode - Edit Profile
+ Site - Dark Mode - UI
+ Site - Dark Mode - Cards
+ Site - Dark Mode - Table
+ Site - Dark Mode - Badge and collapsible
+ Site - Dark Mode - Dropdown
+ Site - Dark Mode - Tabs
+ Site - Dark Mode - Iconboxes
+ Site - Dark Mode - Pagination
+ Site - Dark Mode - Modal & Waves
+ Site - Dark Mode - Forms
+ Site - Dark Mode - Datepicker and Timepicker
+ Site - Dark Mode - Checkbox & Radio
+ Site - Dark Mode - Chips
+ Site - Dark Mode - Range & Select
+ Site - Dark Mode - Switches
+ Site - Dark Mode - Inputs
+ Site - Dark Mode - Timeline
+ Site - Dark Mode - Pricing Tables & Search
+ Site - Dark Mode - Blogs
+ Site - Dark Mode - Client
+ Site - Dark Mode - Calendar
+ Site - Dark Mode - Portfolio
+ Site - Dark Mode - UI Icons

--------------------------------------*/

/*-------------------------------------
  Variables
  + Font: Raleway
  + Primary Color: var(--primary-color) / rgba(var(--primary-rgb), 1)
  + Accent Color: var(--accent-color) / rgba(var(--accent-rgb), 1)
  + Text Color: var(--dark-700)
  + Background Color: #f5f5f5
  + Dark Mode Background Color: var(--dark-900) / var(--dark-800) / var(--dark-700)
  + Dark Mode Text Color: #f5f5f5 / #CFD8DC

-------------------------------------*/

/*-------------------------------------
  Import Font
-------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600);
@import url("variables.css");

@import url("_general.css");
@import url("_preloader.css");
@import url("_ui.css");
@import url("_datepicker.css");
@import url("_timepicker.css");
@import url("_carousel.css");
@import url("_carousel-home-screen.css");
@import url("_slider.css");
@import url("_testimonials.css");
@import url("_floating-action.css");
@import url("_tooltips.css");
@import url("_buttons.css");
@import url("_badges.css");
@import url("_blockquotes.css");
@import url("_pagination.css");
@import url("_spinners.css");
@import url("_accordion.css");
@import url("_waves.css");
@import url("_modal.css");
@import url("_topbar.css");
@import url("_navigation.css");
/* @import url("_navigation-centered.css"); */
@import url("_navigation-dark.css");
@import url("_navigation-colored.css");
@import url("_subpages.css");
@import url("_footer.css");
@import url("_footer-light.css");
@import url("_footer-colored.css");
@import url("_footer-minimal.css");
@import url("_dropdown.css");
@import url("_collection.css");
@import url("_progress.css");
@import url("_backtotop.css");
@import url("_cards.css");
@import url("_tabs.css");
@import url("_iconboxes.css");
@import url("_chips.css");
@import url("_form-range-sliders.css");
@import url("_switches.css");
@import url("_form-elements.css");
@import url("_settings.css");
@import url("_parallax.css");
@import url("_chat.css");
@import url("_calendar.css");
@import url("_events.css");
@import url("_mailbox.css");
@import url("_profile.css");
@import url("_timeline.css");
@import url("_portfolio.css");
@import url("_blogs.css");
@import url("_products.css");
@import url("_login.css");
@import url("_welcome.css");
@import url("_error.css");
@import url("_search.css");
@import url("_pricing.css");
@import url("_invoice.css");
@import url("_notifications.css");
@import url("_profile-edit.css");
@import url("_app-settings.css");
@import url("_clients.css");
@import url("_fixed-footer-menu.css");
@import url("_perfect-scrollbar.css");
@import url("_tables.css");
@import url("_contactus.css");
@import url("_fancybox.css");
@import url("_image-filter.css");
@import url("_shadow.css");
@import url("_team.css");
@import url("_charts.css");
@import url("_activity.css");
@import url("_menu-effect.css");
@import url("_site-darkmode.css");

.custom-contact-strip-wrapper {
    width: 100% !important;
    height: 35px !important; /* Yükseklik 35px yapıldı */
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

.contact-strip-item {
    flex: 1 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 15px !important; /* Font 2px büyütüldü */
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 35px !important; /* İç yükseklik eşitlendi */
    line-height: 35px !important;
}

/* Renkler */
.call-red {
    background-color: #ff0000 !important;
}

.wa-green {
    background-color: #25D366 !important;
}

/* Hover Efektleri */
.call-red:hover { background-color: #cc0000 !important; }
.wa-green:hover { background-color: #128C7E !important; }

/* Mobil Düzenleme - Küçük ekranlarda yazıların taşmaması için */
@media (max-width: 480px) {
    .contact-strip-item {
        font-size: 13px !important;
        height: 60px !important;
    }
}

.black-announcement-bar {
    width: 100% !important;
    background-color: #ef0000  !important; /* Tam siyah */
    height: 55px !important;              /* Diğerleriyle uyumlu olması için 35px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.black-announcement-bar span {
    color: #ffffff !important;            /* Beyaz yazı */
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 16px !important;           /* Okunabilir büyük font */
    font-weight: 800 !important;          /* Ekstra kalın yazı */
    text-transform: uppercase !important; /* Tüm harfleri büyük yapar */
    letter-spacing: 2px !important;       /* Harf aralarını biraz açar (daha şık durur) */
    text-align: center !important;
}

/* Mobil cihazlarda yazı sığmazsa boyutu biraz küçültür */
@media (max-width: 480px) {
    .black-announcement-bar span {
        font-size: 16px !important;
        letter-spacing: 1px !important;
    }
}
.tekli-bilgi-kutusu {
    width: 100%;
    background-color: #1a1a1a; /* Koyu gri/siyah arka plan */
    padding: 30px 20px;
    margin-bottom: 0px; /* Alttaki 4'lü kutuyla mesafe */
    border-radius: 8px;   /* Köşeleri hafif yuvarlar */
    border-left: 5px solid #000000; /* Sol tarafa dikkat çekici kırmızı bir şerit */
    box-sizing: border-box;
    text-align: center;
}

.bilgi-icerik h2 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 0 10px 0 !important;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.bilgi-icerik p {
    color: #cccccc !important;
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.5;
}

/* Mobil cihazlar için uyum */
@media (max-width: 768px) {
    .bilgi-icerik h2 {
        font-size: 18px !important;
    }
    .bilgi-icerik p {
        font-size: 14px !important;
    }
    .tekli-bilgi-kutusu {
        padding: 20px 15px;
    }
}
.pulse-animation {
    display: inline-block; /* Animasyonun düzgün çalışması için gerekli */
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1); /* Başlangıç boyutu */
    }
    50% {
        transform: scale(1.35); /* %15 büyüme */
    }
    100% {
        transform: scale(1); /* Tekrar eski boyuta dönüş */
    }
}

.hizmet-bolgeleri-container {
    max-width: 1200px;
    margin: 5px auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.bolge-baslik {
    text-align: center;
    margin-bottom: 30px;
}

.bolge-baslik h1 {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 32px;
    border-bottom: 3px solid #ff0000;
    display: inline-block;
    padding-bottom: 10px;
}

.ilce-kart {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.ilce-kart:hover {
    transform: translateY(-5px);
    border-color: #ff0000;
}

.ilce-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.ilce-header i {
    color: #ff0000;
    font-size: 28px;
}

.ilce-header h2 {
    margin: 0;
    font-size: 22px;
    color: #1a1a1a;
}

.ilce-icerik p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.hizmet-listesi {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.hizmet-listesi li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.hizmet-listesi li i {
    color: #25D366; /* WhatsApp Yeşili ile uyumlu onay işareti */
}

.diger-ilceler {
    text-align: center;
    background: #1a1a1a;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 40px;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .bolge-baslik h1 { font-size: 24px; }
    .ilce-header h2 { font-size: 18px; }
}
.neler-aliyoruz-wrapper {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

.sayfa-baslik {
    text-align: center;
    margin-bottom: 60px;
}

.sayfa-baslik h1 {
    font-size: 36px;
    font-weight: 900;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 15px;
}

.sayfa-baslik h1::after {
    content: '';
    width: 80px;
    height: 4px;
    background: #ff0000;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.hurda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.hurda-kart {
    background: #fff;
    border: 1px solid #f0f0f0;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.hurda-kart:hover {
    transform: translateY(-10px);
    border-color: #ff0000;
    box-shadow: 0 20px 40px rgba(255,0,0,0.1);
}

.kart-ikon {
    font-size: 45px;
    color: #ff0000;
    margin-bottom: 20px;
}

.hurda-kart h3 {
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 15px;
    font-weight: 700;
}

.hurda-kart p {
    color: #666;
    line-height: 1.7;
    font-size: 15px;
}

.etiket {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #25D366;
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Mobil için */
@media (max-width: 768px) {
    .hurda-grid { grid-template-columns: 1fr; }
}
.iletisim-wrapper {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

.iletisim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.bilgi-kart {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border-left: 5px solid #ff0000;
    transition: 0.3s;
}

.bilgi-kart:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.bilgi-kart i {
    font-size: 35px;
    color: #ff0000;
}

.bilgi-kart h4 {
    margin: 0;
    font-size: 16px;
    color: #666;
}

.bilgi-kart a, .bilgi-kart p {
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
}

.iletisim-aksiyon-box {
    background: #1a1a1a;
    color: #fff;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
}

.iletisim-wp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 18px;
    margin: 25px 0;
    transition: 0.3s;
}

.iletisim-wp-btn:hover {
    background: #128C7E;
    transform: scale(1.02);
}

.harita-placeholder {
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed #444;
    border-radius: 8px;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .iletisim-grid { grid-template-columns: 1fr; }
    .iletisim-aksiyon-box { padding: 25px; }
}
.popup-overlay {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.popup-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}

.popup-content h3 { color: #ff0000; margin: 0; font-size: 18px; }
.popup-content h2 { color: #1a1a1a; margin: 10px 0; font-size: 22px; font-weight: 800; }
.popup-content p { color: #666; margin-bottom: 20px; }

.popup-buttons { display: flex; gap: 10px; flex-direction: column; }

.p-btn {
    padding: 12px;
    text-decoration: none;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.p-tel { background-color: #ff0000; }
.p-wp { background-color: #25D366; }