/* ============================================================
   GEZEGENWEB - MOBİL CSS (768px ve altı) - Canlı Mavi Tema
   ============================================================ */

/* ============================================================
   TOPBAR - MOBİL (Canlı Mavi)
============================================================ */
@media (max-width: 768px) {
    .topbar {
        background: #2563eb !important;
        color: #ffffff;
        padding: 6px 0;
        font-size: 11px;
        border-bottom: 1px solid #1d4ed8;
    }
    .topbar .topbar-info span {
        margin-right: 10px;
        font-size: 10px;
    }
    .topbar .topbar-social a {
        margin-left: 6px;
        font-size: 12px;
    }
    .topbar .text-right { text-align: right; }
    .topbar .topbar-info { display: inline-block; }
    .topbar .topbar-social { display: inline-block; }
}

/* ============================================================
   NAVBAR - MOBİL (Canlı Mavi)
============================================================ */
@media (max-width: 768px) {
    .nav-bar {
        background: #2563eb !important;
        border-bottom: 3px solid #1d4ed8;
        padding: 0;
    }
    .nav-bar-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav-toggle {
        padding: 12px 0;
        font-size: 13px;
        color: #ffffff;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }
    .nav-toggle:hover { color: #bfdbfe; }
    .nav-toggle i { font-size: 18px; }
    .nav-menu ul {
        display: none;
        flex-direction: column;
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .nav-menu ul li {
        width: 100%;
        border-bottom: 1px solid #1d4ed8;
    }
    .nav-menu ul li a {
        color: #ffffff;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        padding: 12px 16px;
        display: block;
        transition: all 0.3s;
        border-bottom: none;
    }
    .nav-menu ul li a:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.1);
        border-bottom: none;
    }
    .nav-menu ul li .sub-menu {
        position: static;
        display: none;
        background: #2563eb;
        border-top: none;
        border-left: 2px solid #1d4ed8;
        margin-left: 10px;
        width: auto;
    }
    .nav-menu ul li:hover .sub-menu { display: none; }
    .nav-menu ul li .sub-menu li a {
        padding: 10px 16px;
        border-bottom: 1px solid #1d4ed8;
        font-size: 12px;
        color: #ffffff;
    }
    .nav-menu ul li .sub-menu li a:hover {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
    }
}

/* ============================================================
   HEADER - MOBİL
============================================================ */
@media (max-width: 768px) {
    .site-header { padding: 10px 0; }
    .header-main {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .site-logo a { font-size: 20px; }
    .header-search {
        width: 100%;
        height: 40px;
        order: 3;
    }
    .header-search input {
        font-size: 12px;
        padding: 0 14px;
    }
    .header-search button {
        width: 45px;
        font-size: 16px;
    }
    .header-user-area {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .header-user-area a {
        padding: 4px 8px;
        gap: 6px;
    }
    .header-user-area i {
        font-size: 20px;
        width: 24px;
    }
    .header-user-area strong { font-size: 11px; }
    .header-user-area span { font-size: 9px; }
    .header-user-area a div { display: none; }
}

/* ============================================================
   HERO SLIDER - MOBİL
============================================================ */
@media (max-width: 768px) {
    .carousel-inner .item { height: 300px; }
    .carousel-caption-custom h1 { font-size: 24px; }
    .carousel-caption-custom p {
        font-size: 14px;
        display: none;
    }
    .carousel-caption-custom .btn-slider {
        padding: 8px 18px;
        font-size: 13px;
    }
    .carousel-caption-custom { left: 5%; right: 5%; }
}

/* ============================================================
   DOMAİN BÖLÜMÜ - MOBİL
============================================================ */
@media (max-width: 768px) {
    .domain-section {
        padding: 12px 0 16px;
    }
    .domain-section h2 { font-size: 20px !important; }
    .domain-section p { font-size: 12px !important; }
    .domain-search-box {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
    }
    .domain-search-box input {
        border-radius: 10px;
        font-size: 14px;
        min-width: auto;
    }
    .domain-search-box button {
        border-radius: 10px;
        font-size: 14px;
        padding: 10px;
    }
    .domain-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 4px;
    }
    .domain-card { padding: 6px 4px; }
    .domain-ext { font-size: 16px; }
    .domain-price { font-size: 10px; }
}

/* ============================================================
   WHY SECTION - MOBİL
============================================================ */
@media (max-width: 768px) {
    .why-section {
        padding: 20px 0 15px;
    }
    .why-section h2 {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .why-box {
        padding: 14px 8px;
        margin-bottom: 10px;
    }
    .why-icon { font-size: 24px; }
    .why-box h4 { font-size: 14px; }
    .why-box p { font-size: 12px; }
}

/* ============================================================
   ÜRÜN KARTLARI - MOBİL
============================================================ */
@media (max-width: 768px) {
    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }
    .section-heading h2 { font-size: 22px; }
    .btn-all-products {
        font-size: 12px;
        padding: 5px 14px;
    }
    .pro-card { margin-bottom: 20px; }
    .product-title {
        font-size: 13px;
        min-height: 32px;
    }
    .price-tag { font-size: 14px; }
    .btn-card-action {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ============================================================
   HOSTING PAKETLERİ - MOBİL
============================================================ */
@media (max-width: 768px) {
    .pricing-section {
        padding: 30px 0 40px;
    }
    .price-card {
        padding: 18px 12px;
        margin-bottom: 20px;
    }
    .price-card h3 { font-size: 16px; }
    .price-amount { font-size: 22px; }
    .price-amount span { font-size: 11px; }
    .price-features li {
        font-size: 11px;
        padding: 5px 0;
    }
    .btn-buy-package {
        font-size: 12px;
        padding: 8px;
    }
}

/* ============================================================
   PROFESYONEL HİZMETLER - MOBİL
============================================================ */
@media (max-width: 768px) {
    .prof-services-section {
        padding: 40px 0;
    }
    .prof-services-left {
        padding-right: 0;
        margin-bottom: 20px;
    }
    .prof-services-title { font-size: 24px; }
    .prof-services-desc { font-size: 13px; }
    .prof-services-image { height: 180px; }
    .prof-play-button {
        width: 50px;
        height: 50px;
        font-size: 18px;
        padding-left: 4px;
        box-shadow: 0 0 0 10px rgba(37,99,235,0.2);
    }
    .prof-services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .prof-service-card { padding: 16px; }
    .prof-service-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .prof-service-title { font-size: 15px; }
    .prof-service-desc { font-size: 12px; }
}

/* ============================================================
   BAŞARILAR - MOBİL
============================================================ */
@media (max-width: 768px) {
    .success-section {
        padding: 25px 0 30px;
        background: #eff6ff;
    }
    .success-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    .success-stats {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        padding: 12px;
        gap: 6px;
    }
    .success-item { padding: 6px 4px; }
    .success-number { font-size: 24px; }
    .success-label { font-size: 10px; }
    .success-content {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }
    .success-content h2 { font-size: 22px; }
    .success-content p { font-size: 13px; }
    .success-small-title { font-size: 12px; }
}

/* ============================================================
   İLETİŞİM - MOBİL
============================================================ */
@media (max-width: 768px) {
    .contact-section { padding: 30px 0; }
    .contact-wrapper {
        flex-direction: column;
        border-radius: 12px;
    }
    .contact-person {
        width: 100%;
        height: 200px;
    }
    .contact-person img {
        height: 100%;
        object-fit: cover;
    }
    .contact-form-area {
        width: 100%;
        padding: 20px 14px;
    }
    .contact-main-title { font-size: 22px; }
    .contact-small-title { font-size: 11px; }
    .contact-form {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .contact-field input,
    .contact-field textarea,
    .contact-field select {
        font-size: 13px;
        padding: 8px 12px;
    }
    .contact-submit {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 10px;
    }
}

/* ============================================================
   REFERANS LOGOLAR - MOBİL
============================================================ */
@media (max-width: 768px) {
    .ref-section {
        padding: 25px 0;
    }
    .ref-section h3 {
        font-size: 20px;
        margin-bottom: 18px;
    }
    .ref-logo {
        padding: 12px 8px;
        font-size: 13px;
        margin-bottom: 10px;
    }
    .ref-logo i { font-size: 22px; }
}

/* ============================================================
   MÜŞTERİ YORUMLARI - MOBİL
============================================================ */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 30px 0 20px;
    }
    .testimonials-section h2 { font-size: 22px; }
    .testimonial-card {
        padding: 18px 14px;
        margin-bottom: 16px;
    }
    .testimonial-text { font-size: 13px; }
}

/* ============================================================
   BLOG - MOBİL
============================================================ */
@media (max-width: 768px) {
    .media-section { padding: 30px 0; }
    .media-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .media-title-area h2 { font-size: 22px; }
    .media-title-area p { font-size: 12px; }
    .blog-card { margin-bottom: 18px; }
    .blog-card-media { height: 150px; }
    .blog-title { font-size: 15px; }
    .blog-desc { font-size: 12px; }
}

/* ============================================================
   FOOTER - MOBİL
============================================================ */
@media (max-width: 768px) {
    .site-footer { padding: 30px 0 0; }
    .footer-widget { margin-bottom: 20px; }
    .footer-widget h5 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .footer-widget ul a { font-size: 12px; }
    .footer-social a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .footer-bottom {
        font-size: 11px;
        padding: 12px 0;
    }
}

/* ============================================================
   WHATSAPP BUTON - MOBİL
============================================================ */
@media (max-width: 768px) {
    .whatsapp-btn {
        width: 45px;
        height: 45px;
        font-size: 22px;
        right: 12px;
        bottom: 12px;
    }
}

/* ============================================================
   TOAST MESAJ - MOBİL
============================================================ */
@media (max-width: 768px) {
    .toast-message {
        bottom: 20px;
        right: 10px;
        left: 10px;
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* ============================================================
   GENEL DÜZELTMELER
============================================================ */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
    .text-center-mobile { text-align: center; }
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .btn {
        font-size: 13px;
        padding: 8px 16px;
    }
}