/* ========================================
   RESPONSIVE STYLES
   Extracted from styles.css
   ======================================== */
/* Mobile Menu Open State */
body.mobile-menu-open{ overflow: hidden; }
/* ===============================================================
 TOUCH DEVICES (hover: none)
 =============================================================== */
@media (hover: none) {
.btn{ min-height: 44px; }
.form-control, .form-select{ min-height: 44px; font-size: 16px;
/* Prevents zoom on iOS */ } }
/* ===============================================================
   REDUCED MOTION PREFERENCE
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll{ opacity: 1; transform: none; transition: none; }
.animate-on-scroll.is-visible{ opacity: 1; transform: none; }
.electric-spark-main{ animation: electricSparkPulse 1.5s ease-in-out infinite; } }
/* ===============================================================
   LARGE DESKTOP & BELOW (max-width: 1520px)
   =============================================================== */
@media (max-width: 1520px) {
#hakkimizda-slider .slider-container{ gap: 16px; }
#hakkimizda-slider .slide.active{ width: 540px; }
#hakkimizda-slider .slide:not(.active){ width: 200px; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-image img{ transform: translateY(27px); } }
/* ===============================================================
   LARGE DESKTOP & BELOW (max-width: 1440px)
   =============================================================== */
@media (max-width: 1440px) {
.content-title{ font-size: 38px; }
.content-text p{ font-size: 17px; }
.hero-card-dark{ padding-left: 100px; padding-right: 100px; }
.client-logo-card{ width: 280px; height: 102px; }
.client-logo-card img{ width: 130px; }
.platform-grid{ grid-template-columns: repeat(5, 208px); }
.services-grid{ max-width: 1200px; gap: var(--spacing-sm); }
.services-grid > .service-card-link, .services-grid > div{ width: 200px; height: 85px; }
.services-grid > .service-card-link .service-card-content, .services-grid > .service-card-link .service-card-content span, .services-grid > div .service-card-content, .services-grid > div .service-card-content span{ font-size: var(--fs-small); }
.services-grid > .service-card-link .service-card-overlay, .services-grid > div .service-card-overlay{ width: 52px; height: 52px; }
.kategori-grid{ max-width: 1200px; }
.paragraph-item{ gap: 160px; }
.paragraph-item-reverse{ gap: 80px; }
.slide-content{ padding: 100px 80px; gap: 60px; min-height: 550px; }
.slide-text{ max-width: 400px; }
.slide-text h2{ font-size: 38px; max-width: 400px; }
.slide-text p{ font-size: 17px; max-width: 400px; }
.odeme-steps-container{ flex-direction: column; gap: 16px; }
.odeme-step-card{ width: 100%; min-height: auto; }
.musteri-panel-grid{ padding: var(--spacing-lg) var(--spacing-lg); }
.musteri-siparisler-wrapper{ grid-template-columns: 1fr 328px; } }
/* ===============================================================
   LARGE DESKTOP & BELOW (max-width: 1400px)
   =============================================================== */
@media (max-width: 1400px) {
.organik-paketler .organik-grid{ flex-wrap: wrap; justify-content: center; } }
/* ===============================================================
   DESKTOP & ABOVE (min-width: 1200px)
   =============================================================== */
@media screen and (min-width: 1200px) {
#hakkimizda-slider .slide.active .hakkimizda-content > .slide-image img{ bottom: 0px; } }
/* ===============================================================
   DESKTOP & BELOW (max-width: 1200px)
   =============================================================== */
@media (max-width: 1200px) {
.clients-grid{ justify-content: center; }
.client-logo-card, .paketler-sidebar, .paket-info-card{ width: 280px; }
.paketler-grid{ grid-template-columns: 280px 1fr; gap: 20px; }
.paket-info-image{ height: 280px; }
.platform-grid{ grid-template-columns: repeat(4, 208px); }
.services-menu-grid{ grid-template-columns: repeat(5, 1fr); }
.feature-card{ padding: 16px; gap: 16px; }
.comments-grid{ gap: 10px; }
.comments-grid > li{ width: 150px; height: 150px; }
.comments-grid > li.active{ width: 188px; height: 188px; }
.comment-content, .uygulama .app-content{ gap: 40px; }
.comment-banner{ width: 300px; height: 310px; }
.comment-text::before{ left: 277px; top: 61px; width: 25px; height: 25px; }
.comment-text{ max-width: 600px; padding: 18px; gap: 14px; border-radius: 20px; }
.kategori-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Hakkimizda slider responsive styles */
#hakkimizda-slider .slide.active{ width: 480px; height: 450px; }
#hakkimizda-slider .slide:not(.active){ width: 180px; height: 450px; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text{ padding: 30px 11px 0; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-image img{ transform: translateY(17px); }
#hakkimizda-slider .slide.active .hakkimizda-content > .slide-image img{ bottom: 50px; }
#hakkimizda-slider .slide-text h2{ font-size: 30px; }
#hakkimizda-slider .slide-text span{ font-size: 24px; }
#hakkimizda-slider .slide-text p{ font-size: 14px; }
.uygulama .app-text{ max-width: 450px; }
.uygulama .app-text h2{ font-size: 34px; }
.price-row .paket-adi{ flex: 1; min-width: 250px; }
.price-row .fiyat, .price-row .miktar, .price-row .sure{ width: 140px; }
.price-row .satin-al{ width: 170px; }
.price-btn{ width: 145px; padding: 14px 16px; font-size: 14px; }
.musteri-siparisler-details-section{ position: relative; top: 0; }
.hero-content h1{ font-size: 38px; }
.ekstra-paketler-avatar{ width: 200px; height: 200px; } }
/* ===============================================================
   TABLET LARGE & BELOW (max-width: 1199px)
   =============================================================== */
@media (max-width: 1199px) {
.navbar-nav{ gap: var(--spacing-sm); }
.paket-options-grid{ grid-template-columns: repeat(3, 1fr); }
.odeme-summary-sticky{ position: static; }
.odeme-summary-card{ margin: 0 auto; }
.table-header, .table-row{ grid-template-columns: 350px repeat(3, 1fr); }
.table-features, .table-cell-feature, .table-package, .table-cell-check{ padding: 24px; }
.table-cell-feature h4, .table-package > div:first-child span{ font-size: 18px; }
.table-cell-feature p, .btn-add-to-cart{ font-size: 14px; } }
/* ===============================================================
   TABLET LARGE & BELOW (max-width: 1100px)
   =============================================================== */
@media (max-width: 1100px) {
.musteri-ayarlar-forms-grid{ grid-template-columns: 1fr; gap: 20px; } }
/* ===============================================================
   TABLET LARGE & BELOW (max-width: 1025px)
   =============================================================== */
@media (max-width: 1025px) {
#section_slider, .packages-section, .ucretsiz-deneme-section{ padding: 40px 0; }
/* Hero slider ve Packages responsive stilleri homepage.css'e tasindi */
.deneme-card, .ucretsiz-deneme-card{ padding: 20px; gap: 16px; margin-top: 32px; }
.deneme-features, .ucretsiz-deneme-features{ gap: 17px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 8px; }
/* Hide scrollbar for Chrome, Safari and Opera */
.deneme-features > div:nth-child(even), .ucretsiz-deneme-divider{ display: block; }
.deneme-inputs, .ucretsiz-deneme-inputs{ flex-direction: column; gap: 12px; }
.deneme-input-wrapper, .ucretsiz-deneme-input-wrapper{ min-width: 100%; width: 100%; }
.deneme-warning, .ucretsiz-deneme-warning{ gap: 8px; }
/* Legacy support */
/* Hide scrollbar for Chrome, Safari and Opera */ }
/* ===============================================================
   DESKTOP & ABOVE (min-width: 1025px)
   =============================================================== */
@media (min-width: 1025px) {
/* Profile overlay moved to profile-overlay.css */ }
/* ===============================================================
   TABLET LARGE & BELOW (max-width: 1024px)
   =============================================================== */
@media (max-width: 1024px) {
.content-title{ font-size: 34px; }
.hero-card-dark{ padding-left: 60px; padding-right: 60px; height: auto; }
.services-grid{ max-width: 900px; gap: 6px; }
.services-grid > .service-card-link, .services-grid > div{ width: 180px; height: 80px; }
.services-grid > .service-card-link .service-card-content, .services-grid > div .service-card-content, .musteri-banner p, .bakiye-list > li > div:first-child > div:last-child > div:first-child{ font-size: 15px; }
.services-grid > .service-card-link .service-card-content span, .services-grid > div .service-card-content span, .stats-grid > li > div:last-child > div:first-child, .bakiye-list > li > div:first-child > div:last-child > div:last-child{ font-size: 13px; }
.services-grid > .service-card-link .service-card-overlay, .services-grid > div .service-card-overlay, .stats-grid > li > div:first-child, .stats-grid > li > div:first-child::before{ width: 48px; height: 48px; }
.kategori-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kategori-hizmetler{ padding: 60px 0; padding-top: 20px; }
.deneme-banner{ padding-right: 180px; }
.ucretsiz-deneme-banner-image{ width: 200px; height: 200px; top: -30px; }
.paragraph-item{ gap: 80px; margin-bottom: 60px; }
.paragraph-item-reverse, .faq-wrapper{ gap: 60px; }
.paragraph-content{ width: 380px; }
.slide-content{ padding: 80px 60px; gap: 40px; min-height: 500px; }
.slide-text, .slide-text p{ max-width: 350px; }
.slide-text h2{ font-size: 34px; max-width: 350px; }
.slider-pagination{ bottom: 36px; padding: 20px; }
/* Sinirsiz servis stilleri homepage.css'e tasindi */
.faq-left{ width: 380px; height: 400px; }
.faq-left > img:first-child{ left: 12px; width: 368px; height: 400px; }
.faq-images{ left: 60px; width: 250px; height: 380px; }
.faq-crown{ left: 60px; top: 100px; width: 60px; height: 60px; }
.faq-crown svg{ width: 28px; height: 28px; }
.faq-notification-1{ left: 0; top: 280px; }
.faq-notification-2{ left: 130px; top: 220px; }
.faq-right{ width: 450px; }
.faq-right h2{ font-size: 26px; }
.musteri-panel-grid{ grid-template-columns: 250px 1fr; gap: var(--spacing-md); }
.musteri-sidebar-card{ padding: 18px 14px 14px; }
.musteri-user-avatar-wrapper{ width: 46px; height: 46px; }
.musteri-membership-icon{ width: 34px; height: 32px; }
.musteri-user-balance, .stats-grid > li > div:last-child > div:first-child{ font-size: 14px; }
.musteri-banner{ height: auto; padding: 32px 24px; gap: 24px; }
.musteri-banner .banner-image{ position: relative; right: 0; top: 0; width: 300px; height: 150px; margin: 0 auto; }
.musteri-banner .banner-content{ text-align: center; align-items: center; }
.musteri-banner h2, .musteri-banner h2 span{ font-size: 24px; }
.musteri-sidebar-nav ul > li > a{ font-size: 14px; padding: 16px; }
.stats-grid, .musteri-user-section, .bakiye-list{ gap: 12px; }
.stats-grid > li{ height: 80px; gap: 14px; padding: 14px; }
.stats-grid > li > div:last-child > div:last-child{ font-size: 20px; }
.musteri-panel-grid{ grid-template-columns: 1fr; padding: 20px 0; }
.musteri-content{ overflow-x: hidden; width: 100%; max-width: 100%; gap: 20px; }
.musteri-sidebar, .musteri-banner .banner-image, .stats-grid::-webkit-scrollbar{ display: none; }
.musteri-sidebar-card{ padding: 16px 12px 12px; }
.musteri-user-avatar-wrapper{ width: 44px; height: 44px; }
.musteri-membership-card{ padding: 14px; }
.musteri-membership-icon{ width: 32px; height: 30px; }
.musteri-sidebar-nav ul > li > a{ padding: 16px 14px; }
.musteri-banner{ padding: 24px 20px; }
.musteri-banner .banner-content{ text-align: start; align-items: start; }
.musteri-banner h2{ font-size: 22px; }
.musteri-content-inner{ padding: var(--spacing-lg); overflow: hidden; width: 100%; max-width: 100%; }
.stats-grid{ display: flex; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 8px; width: 100%; }
.stats-grid > li{ height: 76px; min-width: 230px; flex-shrink: 0; gap: 12px; padding: 12px 14px; }
.stats-grid > li::before{ top: 16px; height: 40px; width: 4.5px; }
.stats-grid > li > div:first-child svg{ width: 22px; height: 22px; }
.stats-grid > li > div:last-child > div:last-child{ font-size: 18px; }
.referans-stats-grid{ grid-template-columns: repeat(2, 1fr); }
.stat-card-with-action{ grid-column: 1 / -1; }
.bakiye-list > li{ padding: 20px 16px; min-height: 70px; }
.bakiye-list > li > div:first-child > div:first-child{ width: 36px; height: 36px; }
.bakiye-list > li > div:first-child > div:first-child svg{ width: 18px; height: 18px; }
.bakiye-list > li > div:last-child{ font-size: 13px; padding: 8px; }
.mobile-bottom-nav-customer{ display: flex; } }
/* ===============================================================
   TABLET & BELOW (max-width: 992px)
   =============================================================== */
@media (max-width: 992px) {
.platform-grid{ grid-template-columns: repeat(3, 208px); margin-top: 20px; } }
/* ===============================================================
   DESKTOP & ABOVE (min-width: 992px)
   =============================================================== */
@media (min-width: 992px) {
.solutions-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; } }
/* ===============================================================
   TABLET & BELOW (max-width: 991px)
   =============================================================== */
@media (max-width: 991px) {
.hero-container-base .filter-dropdown, .siparis-sorgula-header, .siparis-sorgula-text, .siparis-sorgula-title, .siparis-sorgula-description, .siparis-sorgula-inputs-wrapper, .siparis-sorgula-input-field, .telafi-talebi-header, .telafi-talebi-text, .telafi-talebi-title, .telafi-talebi-description, .telafi-talebi-input-field, .task-buttons, .ucretsiz-deneme-profile-card, .process-info-step3, .process-card-3, .telafi-form > div, .telafi-form > button, .adim-card, .musteri-siparisler-service-card, .musteri-siparisler-service-row, .musteri-siparisler-details-divider, .musteri-siparisler-total-row, .talep-submit{ width: 100%; }
.content-title, .musteriler-right-card > p:first-child, .uygulama .app-text h2{ font-size: 32px; }
.musteri-section-header, .musteri-section-content, .musteri-siparis-card, .musteri-siparisler-empty-state, .favoriler-empty{ padding: 16px; }
.musteri-section-header h3, .section-header p, .solutions .section-header p, .section-header p, .musteriler-notification-content > p:first-child, .user-profile-dropdown-item span, .musteri-siparis-code, .musteri-siparis-amount, .favoriler-empty p, .musteri-siparisler-empty-description, .organik-paketler .platform-filter span{ font-size: 15px; }
.tabs-container{ height: auto; overflow-x: auto; overflow-y: hidden; padding: 12px; gap: 8px;
/* Hide scrollbar but keep functionality */ scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE/Edge */ }
.tabs-container::-webkit-scrollbar, .notifications-dropdown::before, .notifications-dropdown::after, .packages-filter-tabs::-webkit-scrollbar, .siparis-sorgula-btn.desktop-only, .telafi-talebi-image, .deneme-steps::-webkit-scrollbar, .price-row.header, .price-row.data .satin-al::before, .organik-paketler .platform-filters::-webkit-scrollbar{ display: none; }
.tab{ font-size: 13px; padding: 10px 16px; }
.notifications-dropdown{ position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 20px 20px 0 0; max-height: 80vh; overflow-y: auto; transform: translateY(100%); }
.notifications-dropdown.active, .user-profile-dropdown.active{ transform: translateY(0); }
.navbar-mobile-actions{ display: flex !important; align-items: center; gap: 5px; }
.navbar-mobile-actions .notifications-trigger{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(120, 68, 228, 0.1); border-radius: 9.6px; padding: 0 !important; }
.navbar-mobile-actions .notifications-trigger i{ color: #FFFFFF; font-size: 18px; }
.navbar-mobile-actions .notifications-trigger img{ width: 20px; height: 20px; }
.navbar-mobile-actions .notifications-trigger .nav-pill-badge{ position: absolute; top: 2.4px; right: 3.2px; min-width: 16px; height: 16px; padding: 0 5.6px; background: var(--primary-purple); border: 1.6px solid #F7F8FD; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 8px; line-height: 1.5em; color: white; }
.navbar-mobile-actions .navbar-toggler{ width: 40px; height: 40px; background: #F5F7FD; border-radius: 9.6px; display: flex; align-items: center; justify-content: center; }
.desktop-only, .navbar-nav-center, .navbar-nav-right{ display: none !important; }
.main-navbar-section{ height: auto; padding: var(--spacing-md) 0; top: 12px; margin: 0 12px; width: calc(100% - 24px); border-radius: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, opacity 0.3s ease; }
.main-navbar-section.navbar-hidden{ transform: translateY(-120px); opacity: 0; pointer-events: none; }
.navbar-logo{ width: 140px; height: auto; } }
/* ===============================================================
 TABLET (max-width: 991px) - Same mobile menu behavior
 =============================================================== */
@media (max-width: 991px) {
/* Mobile Mega Menu Adaptations */
.mega-menu-overlay{ top: 76px; touch-action: none; background: none;}
.mega-menu-wrapper{ position: fixed; top: 87px; left: 12px; right: 12px; width: calc(100% - 24px); }
.mega-menu{ height: 100%; width: 100%; max-width: 100%; max-height: calc(100vh - 160px); margin-top: 10px; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 20px; }
/* Show mobile bottom links */
.menu-mobile-links{ display: flex; order: 3; }
/* Reorder menu structure */
.menu-search{ order: 1; }
.menu-body{ order: 2; display: flex; flex-direction: column; gap: 10px; min-height: auto; flex: 1; }
/* Hide desktop elements on tablet */
.menu-promo, .menu-sidebar > li.active::before, .packages-panes, .packages-banner, .packages-header, .menu-packages > .packages-footer, .mega-menu.search-active .menu-pane.active::before{ display: none; }
/* Sidebar becomes expandable categories */
.menu-sidebar{ width: 100%; flex-direction: column; gap: 10px; flex: 1; }
/* Make content container wrap around active pane */
.menu-content{ display: flex; flex-direction: column; width: 100%; gap: 0; }
/* Packages container */
.menu-packages{ border-radius: 0; }
/* Convert tabs to mobile expandable format */
.menu-sidebar > li{ width: 100%; height: auto; min-height: 72px; background: #F9FAFE; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.2s; position: relative; }
.menu-sidebar > li.active{ background: #F9FAFE; border-radius: 16px 16px 0 0; }
/* Remove desktop curved corners on tablet */
.menu-sidebar > li:hover{ background: rgba(245, 247, 253, 0.8); }
.menu-sidebar > li > div:first-child{ width: 38px; height: 38px; }
.menu-sidebar > li > div:first-child i, .musteriler-slide-content > h3{ font-size: 22px; }
.menu-sidebar > li > div:last-child, .task-back-btn, .task-wait-btn, .ucretsiz-deneme-continue-btn{ flex: 1; }
.menu-sidebar > li > div:last-child > span:first-child{ font-size: 18px; line-height: 20px; }
.menu-sidebar > li > div:last-child > span:last-child{ font-size: 16px; line-height: 20px; }
/* Add arrow toggle for tablet tabs - override desktop curved corners */
.menu-sidebar > li::after{ content: '' !important; position: static !important; width: 34px !important; height: 34px !important; background: rgba(212, 224, 255, 0.3) !important; border: 1px solid rgba(225, 233, 255, 0.5) !important; box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32) !important; border-radius: 9px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234C5473' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; -webkit-mask: none !important; mask: none !important; right: auto !important; bottom: auto !important; top: auto !important; left: auto !important; transition: transform 0.3s ease-in-out !important; }
.menu-sidebar > li.last-tab::after, .mega-menu:not(.mobile-initialized) .menu-sidebar > li.last-tab.active::after{ transform: rotate(-90deg) !important; }
/* Rotate arrow when tab is active/expanded */
.menu-sidebar > li.active::after{ transform: rotate(180deg) !important; display: flex !important; }
.menu-sidebar > li.last-tab.active::after{ transform: rotate(90deg) !important; display: flex !important; }
/* On tablet, initially hide active state from desktop */
.mega-menu:not(.mobile-initialized) .menu-sidebar > li.active::after{ transform: rotate(0deg) !important; }
/* Hide original panes container on tablet */
.menu-content .menu-pane, .mega-menu.search-active .menu-sidebar, .mega-menu.search-active .menu-content .menu-pane, .mega-menu.search-active .packages-banner, .mega-menu.search-active .packages-header, .mega-menu.search-active .packages-footer, .mega-menu.search-active .menu-pane > .packages-footer{ display: none !important; }
/* Panes that are moved to sidebar (cloned) */
.menu-sidebar > .menu-pane{ display: block; width: 100%; background: #F9FAFE; border-radius: 0 0 16px 16px; padding: 10px 16px 16px 16px; margin-top: 0; }
/* Make packages panes container hidden */
/* Adjust packages layout */
.menu-packages, .mega-menu.search-active .menu-packages{ background: transparent; padding: 0; }
.packages-panes{ flex: none; }
.pane-list{ display: flex; flex-direction: column; gap: 20px; }
.pane-list li a{ padding: 0; background: transparent; border-radius: 0; gap: 10px; }
.pane-list li a:hover{ background: transparent; transform: none; }
/* Package item icon */
.pane-list li a > div:first-child{ width: 33px; height: 33px; }
/* Package item text styles */
.pane-list li a > div:last-child > span:first-child{ font-size: 12px; line-height: 18px; font-weight: 600; }
.pane-list li a > div:last-child > span:last-child{ font-size: 14px; line-height: 22px; font-weight: 600; }
/* Hide banner, header */
/* Hide footer in menu-packages (desktop location) */
/* Show footer button inside pane for mobile/tablet */
.menu-pane > .packages-footer{ display: block; height: 30px; margin-top: 20px; }
.menu-pane > .packages-footer a{ width: 100%; height: 100%; background: rgba(212, 224, 255, 0.3); border: 1px solid rgba(225, 233, 255, 0.8); box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32); border-radius: 9px; font-size: 12px; font-weight: 600; line-height: 22px; color: #7A7F99; display: flex; align-items: center; justify-content: center; }
/* Scrollbar for mega menu */
.mega-menu::-webkit-scrollbar{ width: 4px; }
.mega-menu::-webkit-scrollbar-thumb{ background: #D4E0FF; border-radius: 2px; }
.mega-menu::-webkit-scrollbar-track{ background: transparent; }
/* ===== MOBILE SEARCH MODE ===== */
/* When search is active, override the normal mobile layout */
.mega-menu.search-active .menu-content{ display: flex; width: 100%; }
/* Show panes in menu-content during search */
.mega-menu.search-active .menu-content .menu-pane.active, .navbar-toggler{ display: block !important; }
/* Search results layout for mobile */
.mega-menu.search-active .packages-panes{ display: flex; flex-direction: column; gap: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Category headers in search mode */
/* Single result grid on mobile */
.mega-menu.search-active .menu-pane.single-result .pane-grid, .hakkimizda-section .section-content{ grid-template-columns: 1fr; }
/* Hide banners and headers in search mode */
.nav-link{ padding: 10px 12px !important; }
.nav-icon{ background: none; }
.nav-icon-button, .nav-pill-icon, .price-icon-wrapper{ width: 40px; height: 40px; }
.nav-icon-button img{ width: 20px; height: 20px; }
.section-padding{ padding: 48px 0; }
.section-header, .clients-section .section-header{ margin-bottom: 24px; }
.section-header h2, .section-header h3, .solutions .section-header h2{ font-size: 26px; }
/* Legacy classes - kept for backward compatibility */
.hero-container-base{ padding: 20px 0 0 0; }
.content-second{ flex-direction: column; gap: 24px; }
.side-image-wrapper{ width: 100%; max-width: 272.41px; height: auto; }
.clients-section, .hero{ padding: 50px 0; }
.paket-options-grid, .services-tools-grid, .musteri-favoriler-grid{ grid-template-columns: repeat(2, 1fr); }
.ucretsiz-araclar{ padding: 30px 20px; }
.app-store-badges{ gap: 8px; }
.copyright-wrapper{ gap: 5px; }
.copyright-wrapper > div:first-child{ text-align: center; }
.services-menu-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); }
/* Show mobile actions on mobile */
.services-menu-mobile-actions{ display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--bg-light-alt); margin-top: 16px; }
.services-mobile-actions-row{ display: flex; align-items: center; gap: 8px; }
.services-mobile-action-btn{ display: flex; flex: 1; align-items: center; gap: 8px; padding: 10px; background-color: #F5F7FD; border: 1px solid rgba(102, 111, 148, 0.1); border-radius: 10px; transition: var(--transition-default); }
.services-mobile-action-btn:hover{ background-color: rgba(120, 68, 228, 0.03); border-color: rgba(120, 68, 228, 0.1); }
.services-mobile-action-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }
.services-mobile-action-btn span{ font-size: 14px; font-weight: var(--fw-medium); color: var(--text-dark-muted); line-height: 1.177; }
/* Hide navbar collapse functionality on mobile */
.services-section, .platform-section, .musteriler-bag-kurun-section{ padding: 40px 0; }
.services-grid > .service-card-link, .services-grid > div{ width: 100%; height: 75px; padding: 14px; }
.services-grid > .service-card-link .service-card-content, .services-grid > div .service-card-content{ font-size: var(--fs-small); }
.services-grid > .service-card-link .service-card-content span, .services-grid > div .service-card-content span{ font-size: var(--fs-xs); }
.services-grid > .service-card-link .service-card-overlay, .services-grid > div .service-card-overlay{ width: 44px; height: 44px; }
.packages-top-section, .telafi-talebi-container{ flex-direction: column; gap: 20px; }
.packages-filter-tabs{ justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
/* Smooth scrolling on iOS */ scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE/Edge */ }
.packages-social-icons{ width: fit-content; }
.feature-card, .solution-card{ padding: 18px; }
.feature-icon-wrapper.icon-tall, .solution-card > div:first-child{ width: 56px; height: 100px; }
.feature-icon-wrapper.icon-tall svg, .solution-card > div:first-child svg, .price-icon-wrapper svg, .user-avatar{ width: 26px; height: 26px; }
.feature-card-title, .solution-card > div:last-child h3, .comment-author h4, .comment-author p, .price-title, .favoriler-empty h3, .musteri-siparisler-empty-title{ font-size: 18px; }
/* Solution Card - Tablet */
.siparis-sorgula-input-wrapper{ width: 100%; height: 68px; padding: 16px; }
.siparis-sorgula-input, .telafi-talebi-input{ padding-right: 0; }
/* Hide desktop button (inside input) */
/* Show mobile button (below input) */
.siparis-sorgula-btn.mobile-only{ display: flex; margin-top: 20px; }
/* Hide image on mobile - like other modals */
.telafi-talebi-form{ width: 100%; height: auto; padding: 40px 30px; gap: 24px; }
.telafi-talebi-inputs{ width: 100%; gap: 16px; }
.telafi-talebi-input-wrapper{ width: 100%; height: auto; padding: 16px; }
.telafi-talebi-btn{ position: absolute; left: 16px; right: 16px; bottom: 16px; top: auto; transform: none; width: calc(100% - 32px); height: 60px; }
.telafi-talebi-btn:hover{ transform: translateY(-1px); }
/* Why Choose Us stilleri homepage.css'e tasindi */
.comments-grid{ flex-wrap: wrap; gap: 12px; }
.comments-grid > li{ width: 140px; height: 140px; }
.comments-grid > li.active{ width: 170px; height: 170px; }
.comment-content{ flex-direction: column-reverse; gap: 30px; text-align: center; }
.comment-banner{ width: 280px; height: 290px; }
.comment-text::before{ display: block; left: calc(50% - 47px/2); width: 25px; height: 25px; transform: rotate(45deg); }
.comment-text{ align-items: start; gap: 14px; text-align: start; padding: 20px; border-radius: 24px; max-width: 398px; width: 100%; }
.comment-quote p{ font-size: 16px; }
.deneme-steps{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
/* Smooth scrolling on iOS */ scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE/Edge */ }
/* Hide scrollbar for Chrome/Safari/Edge */
/* Prevent step items from shrinking */
.deneme-steps .step-wrapper{ flex-shrink: 0; min-width: 280px;
/* Ensure each step has minimum width */ }
.process-info{ flex-direction: column; gap: 40px; }
.ucretsiz-deneme-process-arrow{ transform: translate(-50%, -50%) rotate(90deg); }
.deneme-banner{ padding: 24px 140px 24px 24px; }
.ucretsiz-deneme-banner-image{ width: 150px; height: 150px; top: -20px; }
.ucretsiz-deneme-packages{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ucretsiz-deneme-package{ min-width: unset; }
.ucretsiz-deneme-task{ flex-direction: column; gap: 20px; align-items: flex-start; }
.ucretsiz-deneme-task-actions, .telafi-form{ width: 100%; flex-direction: column; }
.deneme-bottom-actions{ flex-direction: column; align-items: stretch; }
.paragraph-item, .paragraph-item-reverse{ flex-direction: column; gap: 40px; margin-bottom: 50px; }
.paragraph-content{ width: 100%; max-width: 600px; }
.slide-content{ flex-direction: column; padding: 60px 40px; gap: 40px; min-height: auto; }
.swiper-slide .slide-content{ padding: 60px 40px; }
.slide-text, .slide-text p, .service-card, .uygulama .app-text{ max-width: 100%; }
.slide-text h2{ font-size: 32px; max-width: 100%; }
.slider-pagination{ bottom: 24px; padding: 16px; gap: 12px; }
.slider-pagination .swiper-pagination-bullet{ width: 8px; height: 8px; }
.slider-pagination .swiper-pagination-bullet-active{ width: 40px; }
.menu-image img{ object-fit: contain; }
.menu-card{ padding: 24px; position: static; }
.content-card{ padding: 24px; gap: 24px; }
.hakkimizda-section{ padding-bottom: 0; }
.iletisim-content{ grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.iletisim-sticky{ position: static; gap: 20px; }
.iletisim-info-card{ padding: 24px; }
.process-wrapper, .talep-row{ flex-direction: column; }
.step-wrapper{ padding: 12px 16px; }
.step-nr{ width: 32px; height: 32px; }
.step-nr span, .ucretsiz-deneme-step-title{ font-size: 14px; }
.ucretsiz-deneme-step-description{ font-size: 12px; }
.ucretsiz-deneme-profile-card{ height: auto; padding: 16px; }
.process-arrow{ left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
/* Keep horizontal layout on tablet */
.card-header{ flex-direction: row; align-items: center; gap: 20px; }
.card-header > div:first-child{ width: fit-content; height: 95px; flex-shrink: 0; }
.card-header > div:first-child svg{ width: 22px; height: 22px; }
.card-footer{ flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
.card-stats{ gap: 20px; }
.card-badge{ align-self: auto; }
.odeme-ozeti{ margin-top: 24px; }
.telafi-talebi-page .card-badge{ align-self: flex-end; justify-content: center; width: 100%; }
.paket-adimlar-section{ padding: 30px 0; min-height: auto; }
.paket-adimlar-wrapper{ flex-direction: column; gap: 0; width: 100%; }
.paket-adimlar-wrapper .paket-type-tabs{ width: 100%; order: -1; }
/* Grid for tablet - 3 items per row */
.post-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
.post-grid-item{ width: 100%; height: auto; aspect-ratio: 1; }
/* Musteriler 991px stilleri homepage.css'e tasindi */
.app-about, .faq-section, .organik-paketler{ padding: 60px 0; }
.app-about-content{ flex-direction: column; gap: 60px; }
.app-about-cards-column{ width: 100%; max-width: 500px; gap: 24px; }
.app-about-phone-wrapper{ width: 100%; max-width: 367px; height: auto; aspect-ratio: 367 / 482; }
.uygulama{ padding: 60px 0 80px; }
.uygulama .app-content{ flex-direction: column-reverse; gap: 40px; text-align: center; }
.uygulama .store-buttons, .organik-paketler .duration-filters{ justify-content: center; }
.uygulama .app-phones img{ max-width: 400px; }
.faq-wrapper{ flex-direction: column; gap: 50px; }
.faq-left, .faq-right{ width: 100%; max-width: 520px; }
.faq-left{ height: 400px; margin: 0 auto; }
.price-table{ padding: 20px 0; }
.price-wrapper{ padding: 16px; overflow-x: auto; }
.price-wrapper .price-table{ min-width: 900px; }
.price-table{ padding: 15px 0 40px 0; }
.price-wrapper{ padding: 16px; border-top-width: 4px; margin-bottom: 16px; }
.price-header{ height: 72px; padding: 0 16px; border-radius: 20px; }
.price-header-content, .hero-avatars{ gap: 15px; }
.price-platform-name, .price-platform-service{ font-size: 18px; line-height: 1em; }
/* Mobile: Card-based layout */
.price-wrapper .price-table{ display: flex; flex-direction: column; gap: 16px; min-width: unset; }
/* Hide desktop header row on mobile */
/* Transform each data row into a vertical card */
.price-row.data{ display: flex; flex-direction: column; background: #F6F7FB; border: 1px dashed #EAEAED; border-radius: 15px; gap: 0; min-height: unset; overflow: hidden; }
.price-row.data > div{ width: 100%; min-height: unset; padding: 15px 16px; background: transparent; border: none; gap: 6px; justify-content: space-between; }
/* Add labels to cells on mobile */
.price-row.data .paket-adi::before{ content: 'Paket Adı:'; font-weight: 600; font-size: 15px; color: #666F94; flex-shrink: 0; }
.price-row.data .fiyat::before{ content: 'Fiyat:'; font-weight: 600; font-size: 15px; color: #666F94; width: 200px; flex-shrink: 0; }
.price-row.data .miktar::before{ content: 'Miktar:'; font-weight: 600; font-size: 15px; color: #666F94; width: 200px; flex-shrink: 0; }
.price-row.data .sure::before{ content: 'Ortalama Süre:'; font-weight: 600; font-size: 15px; color: #666F94; width: 200px; flex-shrink: 0; }
/* Package name cell - special layout */
.price-row.data .paket-adi{ padding-left: 16px; flex-direction: row; align-items: center; }
.price-package-info{ display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 10px; width: 188px; flex-shrink: 0; }
/* Other cells - row layout with centered content */
.price-row.data .fiyat, .price-row.data .miktar, .price-row.data .sure{ flex-direction: row; align-items: center; justify-content: space-between; }
.price-row.data .fiyat > span, .price-row.data .miktar > span, .price-row.data .sure > span{ display: flex; justify-content: flex-end; align-items: center; flex: 1; }
/* Button cell - no label, full width button */
.price-row.data .satin-al{ padding: 15px 16px; justify-content: center; align-items: center; }
.price-btn{ width: 100%; height: 50px; padding: 14px 16px; justify-content: center; font-size: 16px; }
/* Icon sizing on mobile */
.price-icon{ width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.price-icon svg{ width: 16px; height: 16px; }
/* Typography adjustments */
.price-row.data > div{ font-size: 15px; line-height: 1.3em; }
.price-row.data .fiyat{ font-weight: 800; }
.user-profile-card{ padding: 0 8px; height: 45px; }
.user-info{ width: auto; max-width: 120px; }
.user-name, .musteri-siparis-label, .musteri-siparis-amount-label{ font-size: 13px; }
.user-balance{ font-size: 11px; }
.user-profile-dropdown{ position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; transform: translateY(100%); box-shadow: 0px -5px 20px 0px rgba(47, 57, 82, 0.15); }
.user-profile-dropdown-item{ padding: 16px 20px; }
.user-profile-dropdown-item:first-child:hover{ border-radius: 20px 20px 0 0; }
.user-profile-dropdown-item:last-child:hover{ border-radius: 0 0 0 0; }
.musteri-section-header.musteri-siparisler-header, .table-features, .table-cell-feature, .table-package, .table-cell-check{ padding: 20px; }
.musteri-siparisler-header{ flex-direction: column; align-items: flex-start; gap: 12px; }
.musteri-siparisler-controls{ width: 100%; gap: 8px; flex-wrap: nowrap; }
.musteri-siparisler-search{ flex: 1 1 0; width: 0; min-width: 0; padding: 8px 10px; height: 38px; gap: 6px; }
.musteri-siparisler-search svg{ width: 16px; height: 16px; flex-shrink: 0; }
.musteri-siparisler-search-input{ font-size: 13px; min-width: 0; width: 100%; }
.musteri-siparisler-filter-wrapper{ flex: 1 1 0; width: 0; min-width: 0; }
.musteri-siparisler-filter{ width: 100%; padding: 8px 10px; height: 38px; gap: 6px; }
.musteri-siparisler-filter-label{ flex: 1; min-width: 0; overflow: hidden; }
.musteri-siparisler-filter-selected{ font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.musteri-siparisler-filter-arrow{ width: 14px; height: 14px; flex-shrink: 0; }
.musteri-son-siparisler-list{ gap: 12px; }
.musteri-siparis-icon-wrapper{ width: 36px; height: 36px; }
.musteri-siparis-icon-wrapper svg{ width: 18px; height: 18px; }
.musteri-siparis-info{ width: 100px; }
.musteri-siparis-btn{ padding: 9px 11px; font-size: 13px; }
.favoriler-empty img, .musteri-siparisler-empty-image{ width: 80px; height: 140px; }
.musteri-destek-controls{ flex-wrap: wrap; }
.musteri-destek-search{ width: 180px; }
.musteri-destek-filter{ width: 150px; }
.siparis-service-info{ width: auto; }
.musteri-siparisler-details-title{ width: auto; font-size: 15px; }
.hero-content h1{ font-size: 34px; }
.hero-content p{ font-size: 17px; }
.ekstra-paketler-avatar{ width: 150px; height: 150px; }
.organik-paketler .filters{ flex-direction: column; gap: 15px; }
.organik-paketler .platform-filters{ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE and Edge */ }
.organik-paketler .platform-filter{ padding: 10px 20px; flex-shrink: 0; white-space: nowrap; }
.organik-paketler .organik-grid, .organik-package-content{ gap: 24px; }
.organik-package-card{ width: 100%; max-width: 430px; height: auto; min-height: 711px; }
.organik-package-card-bg{ width: calc(100% - 10px); height: calc(100% - 10px); }
.organik-package-content button, .organik-package-features{ width: 100%; max-width: 100%; }
.paketler-table{ padding: 30px 0; }
/* Reduce padding on smaller screens */
.table-cell-feature h4, .table-package > div:first-child span{ font-size: 16px; }
.table-cell-feature p{ font-size: 14px; line-height: 1.71em; }
.btn-add-to-cart{ font-size: 13px; padding: 12px 16px; }
.btn-add-to-cart-icon{ width: 28px; height: 28px; } }
/* ===============================================================
   MOBILE LARGE & BELOW (max-width: 968px)
   =============================================================== */
@media (max-width: 968px) {
.organik-paketler .organik-grid{ display: block; position: relative; overflow: visible; touch-action: pan-y; padding-bottom: 40px; }
.organik-paketler .organik-slider-wrapper{ display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; justify-content: flex-start; }
.organik-paketler .organik-slider-wrapper::-webkit-scrollbar{ display: none; }
.organik-paketler .organik-slider-wrapper .organik-package-card{ flex: 0 0 calc(100% - 40px); scroll-snap-align: start; scroll-snap-stop: always; min-height: 660px; }
/* Slider Pagination Dots */
.organik-paketler .organik-pagination{ display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; }
.organik-paketler .organik-pagination-dot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(120, 68, 228, 0.2); border: none; padding: 0; cursor: pointer; transition: all 0.3s ease; }
.organik-paketler .organik-pagination-dot.active{ width: 24px; border-radius: 4px; background: linear-gradient(90deg, #7844E4 0%, #A855F7 100%); }
/* Pagination Dot Slide Animations */
@keyframes dotSlideFromLeft {
from{ opacity: 0; transform: translateX(-10px); }
to{ opacity: 1; transform: translateX(0); } }
@keyframes dotSlideFromRight {
from{ opacity: 0; transform: translateX(10px); }
to{ opacity: 1; transform: translateX(0); } }
.organik-paketler .organik-pagination-dot.active.slide-from-left{ animation: dotSlideFromLeft 0.3s ease-out; }
.organik-paketler .organik-pagination-dot.active.slide-from-right{ animation: dotSlideFromRight 0.3s ease-out; }
/* Package Card Structure Classes for Mobile */
.organik-paketler .organik-package-pricing{ display: flex; flex-direction: column; gap: 0; }
.organik-paketler .organik-price-info{ display: flex; flex-direction: column; gap: 0; max-width: 100%; margin-bottom: 20px; }
.organik-paketler .organik-package-description{ font-weight: 600; font-size: 14px; line-height: 1.375; color: #666F94; margin: 0; }
.organik-paketler .organik-package-features-list{ display: flex; flex-direction: column; align-self: stretch; gap: 14px; }
.organik-paketler .organik-package-feature-item{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-self: stretch; gap: 10px; min-height: 24px; }
.organik-paketler .organik-package-feature-content{ display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1; }
.organik-paketler .organik-package-feature-icon{ display: flex; align-items: center; justify-content: center; }
.organik-paketler .organik-feature-info-icon{ width: 18px; height: 18px; color: #7A7F99; flex-shrink: 0; cursor: pointer; }
/* Hakkimizda slider - hide images on 820px and below */
#hakkimizda-slider .hakkimizda-content > .slide-image{ display: none !important; } }
/* ===============================================================
   MOBILE LARGE & BELOW (max-width: 820px)
   =============================================================== */
@media (max-width: 820px) {
.paketler-content, .paketler-sidebar, .paket-info-card, .paket-users-card{ width: 100%; }
.paketler-grid{ display: flex; flex-direction: column-reverse; gap: 30px; }
.paketler-sidebar{ position: relative; top: 0; flex-direction: row; width: 100%; }
.paket-info-image{ width: 100%; height: auto; } }
/* ===============================================================
   DESKTOP & ABOVE (min-width: 769px)
   =============================================================== */
@media (min-width: 769px) {
.main-navbar-section{ top: 40px;
/* Approximate height of top bar */ }
.input-display-badge.desktop-only{ display: flex; width: 100px; height: 46px; background: rgba(120, 68, 228, 0.1); border-radius: 12px; align-items: center; justify-content: center; flex-shrink: 0; }
.input-display-badge.desktop-only span{ font-weight: 600; line-height: 1.19; color: #7844E4; }
.input-display-badge.mobile-only{ display: none; } }
/* ===============================================================
   MOBILE LARGE & BELOW (max-width: 769px)
   =============================================================== */
@media (max-width: 769px) {
#hakkimizda-slider .slider-container{ gap: 10px; flex-direction: column; }
#hakkimizda-slider .slide.active{ width: 100%; height: 374px; border-radius: 24px; }
#hakkimizda-slider .slide:not(.active){ width: 100%; height: 90px; border-radius: 20px; }
#hakkimizda-slider .slide.active .hakkimizda-content{ flex-direction: column; padding: 30px 20px 0; }
#hakkimizda-slider .slide.active .hakkimizda-content > .slide-text{ padding: 0; width: 100%; max-width: 358px; gap: 0; }
#hakkimizda-slider .slide-text span{ font-size: 24px; font-weight: 900; line-height: 1.71; }
#hakkimizda-slider .slide-text h2{ font-size: 36px; font-weight: 800; line-height: 1.14; }
#hakkimizda-slider .slide-text p{ font-size: 16px; font-weight: 500; line-height: 1.54; max-width: 100%; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text span{ font-size: 15px; font-weight: 800; line-height: 1.37; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text h2{ font-size: 22px; font-weight: 800; line-height: 1.12; text-align: center; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content{ padding: 0; gap: 0; align-items: start; margin-bottom: 14px; }
#hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text{ padding: 0 20px 0; gap: 0; align-items: start; }
#hakkimizda-slider .slide.active .slide-footer{ height: 20px; }
#hakkimizda-slider .slide:not(.active) .slide-footer{ height: 10px; }
#hakkimizda-slider .slide:not(.active):hover{ transform: none; box-shadow: none; opacity: 0.95; } }
/* ===============================================================
   MOBILE LARGE & BELOW (max-width: 768px)
   =============================================================== */
@media (max-width: 768px) {
.content-title, .slide-text h2, .uygulama .app-text h2{ font-size: 28px; }
.content-text p, .slide-text p, .text-block h2, .text-block p, .iletisim-info-text p, .uygulama .app-text p, .organik-paketler .duration-filter span, .table-cell-feature h4, .table-package > div:first-child span{ font-size: 15px; }
.heading-section{ font-size: 24px; padding: 0 16px; }
.text-body{ font-size: 14px; padding: 0 16px; }
.badge span{ font-size: 12px; }
.badge-group > div:not(:first-child), .card-header > div:first-child svg, .adim-bottom-bar .icon-wrapper svg, .faq-crown svg{ width: 24px; height: 24px; }
.top-bar-section, .clients-grid::-webkit-scrollbar, .kategori-tabs-wrapper::-webkit-scrollbar, .services-platform-filters::-webkit-scrollbar, .comments-grid::-webkit-scrollbar, .ucretsiz-deneme-banner-image, .input-display-badge.desktop-only, .adim-bottom-bar > div:last-child > span, .musteriler-character-image, .quick-amounts::-webkit-scrollbar, .organik-paketler .platform-filters::-webkit-scrollbar{ display: none; }
.top-bar-content{ flex-direction: column; gap: var(--spacing-sm); align-items: stretch; }
.top-bar-left, .top-bar-right{ gap: var(--spacing-sm); }
.top-bar-right, .auth-country-selector, .iletisim-social-icons{ justify-content: space-between; }
.navbar-nav{ gap: var(--spacing-md); padding-top: var(--spacing-md); }
.section-padding, .clients-section, .why-choose-us, .comments, .slider-section, .app-about, .hero{ padding: 40px 0; }
.mobile-bottom-nav, .mobile-price-bar, .stat-badge{ display: flex; }
/* Hide price and icon from desktop bottom bar on mobile */
.paket-selected-price, .paket-icon-wrapper, .desktop-only{ display: none !important; }
/* Adjust paket-bottom-bar layout on mobile */
.paket-bottom-left, .paket-bottom-right, .paket-add-to-cart, .upsell-stat, .musteri-destek-ticket-info, .transaction-info{ flex: 1; }
.paket-add-to-cart, .filter-search, .auth-input-container, .iletisim-submit-btn, .paket-type-tabs, .paket-bottom-left, .deneme-coupons, .ucretsiz-deneme-packages-btn, .ucretsiz-deneme-complete-btn, .sinirsiz-servis .card-link, .paket-adimlar-upsell-total, .musteri-destek-create-btn, .referans-count-indicator, .musteri-destek-ticket-top, .musteri-destek-ticket-btn, .transaction-left, .mesaj-bubble p, .bakiye-list > li > div:first-child, .payment-btn, .musteri-ayarlar-submit-btn{ width: 100%; }
.section-header{ margin-bottom: 20px; }
.section-header h2, .section-header h3, .solutions .section-header h2, .hero-title-dark, .hero-container-base .hero-text-container h1, .kategori-header .hero-text-container h1, .comments .section-header h2, .musteriler-left-header > p:first-child, .musteriler-right-card > p:first-child, .app-about-header h2, .organik-paketler .section-header h2{ font-size: 24px; }
.section-header p, .solutions .section-header p, .section-header p, .hero-description-dark, .hero-container-base .hero-text-container p, .kategori-header .hero-text-container p, .feature-link, .solution-card > div:last-child span, .comments .section-header p, .ucretsiz-deneme-success-message span, .menu-header p, .iletisim-info-header p, .service-header h3 .platform-service, .service-item span, .show-more, .odeme-card-subtitle, .siparis-header p, .card-stat span:first-child, .card-stat span:last-child, .card-badge span, .odeme-ozeti-header p, .odeme-ozeti-row span:last-child, .musteriler-notification-content > p:first-child, .app-about-header p, .app-about-feature-card p, .faq-notification > div:last-child p:first-child, .faq-items > li .faq-content p, .favoriler-empty p, .musteri-siparisler-empty-description, .organik-paketler .section-header p, .organik-paketler .platform-filter span, .eposta-verification p{ font-size: 14px; }
/* Legacy classes - kept for backward compatibility */
.mobile-only{ display: block !important; }
.hero-card-dark{ padding: 40px 20px; border-right: 4px solid #7844E4; border-bottom: 4px solid #7844E4; border-radius: 16px; }
/* Hero Search Box - Tablet */
.hero-card-dark .search-box{ max-width: 100%; height: auto; padding: 16px 20px; gap: 16px; }
.search-box > div:nth-child(2){ height: 16px; }
/* Fiyat Listesi Filters - Mobile */
.hero-card-dark .filters{ flex-direction: column; gap: 12px; padding: 0 16px; }
.filter-item{ width: 100%; min-width: auto; }
.contact-form{ padding: 24px; position: static; }
.iletisim-form-row, .paketler-sidebar, .banner-actions, .musteriler-bag-kurun-wrapper, .referans-confirm-actions{ flex-direction: column; }
.iletisim-form-footer{ flex-direction: column-reverse; align-items: stretch; }
.clients-grid{ gap: 12px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE/Edge */ padding-bottom: 8px; justify-content: flex-start; }
/* Hide scrollbar for Chrome, Safari and Opera */
.client-logo-card{ width: 170px; flex-shrink: 0; scroll-snap-align: start; }
.client-logo-card img{ width: 110px; }
.kategori-header .header-content{ padding: 40px 20px; border-right: 4px solid #7844E4; border-bottom: 4px solid #7844E4; }
.kategori-tabs-wrapper{ overflow-x: auto; -webkit-overflow-scrolling: touch;
/* Hide scrollbar on mobile */ scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE/Edge */ padding: 0 16px;
/* Side padding for scroll area */ }
.kategori-tabs-container{ min-width: fit-content;
/* Grows with content */ height: auto; flex-wrap: nowrap; padding: 12px; gap: 8px; justify-content: flex-start; margin-left: 120px; }
.kategori-tab{ font-size: 13px; padding: 10px 16px; white-space: nowrap; flex-shrink: 0; }
.paket-quantity-control, .sinirsiz-servis .slider{ gap: 0; }
.paketler-section{ padding: 20px 0 20px 0; }
.paket-selection-card{ padding: 20px; border-top-right-radius: 0; border-top-left-radius: 0; }
.paket-features, .hero-buttons{ gap: 12px; }
.paket-feature span, .iletisim-info-box p, .telafi-talebi-page .card-badge span, .service-siparis-title, .musteri-siparisler-service-value, .musteri-siparisler-details-date, .table-cell-feature p{ font-size: 13px; }
/* Grid handles sizing automatically */
.paket-bottom-bar{ flex-direction: row; gap: 16px; padding: 0; border: none; border-radius: 0; background: transparent; }
.paket-bottom-right{ width: 100%; justify-content: space-between; }
.platform-services{ padding: 0 0 40px 0; }
.platform-grid{ grid-template-columns: repeat(2, 208px); gap: 12px; }
.footer-contact{ width: calc(100% - 30px); max-width: calc(100% - 30px); padding: 20px; flex-direction: column; align-items: start; gap: 10px; }
.contact-buttons > a{ padding: 0 20px; font-size: 14px; }
.mesaj-input-wrapper{ padding: 0 15px; }
.payment-logos{ gap: 5px; justify-content: center; }
.app-badge{ width: 120px; height: 38px; padding: 0 12px; }
.social-icons, .why-choose-us .cards, .ucretsiz-deneme-task-info, .paket-adimlar-wrapper .paket-type-tab-content{ gap: 10px; }
.social-icons > a{ width: 28px; height: 28px; font-size: 12px; }
.platform-filter span, .services-grid > .service-card-link .service-card-content span, .services-grid > div .service-card-content span{ font-size: var(--fs-small); }
.services-menu-section-icon{ width: 40px; height: 40px; }
.services-menu-grid{ grid-template-columns: repeat(3, 1fr); }
.services-platform-filters{ flex-wrap: nowrap; gap: var(--spacing-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 10px 12px 10px; }
.platform-filter{ min-width: 125px; height: 36px; flex-shrink: 0; }
.services-section, #platform-section{ padding: var(--spacing-xl) 0; }
.services-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.services-grid > .service-card-link, .services-grid > div{ width: 100%; height: 80px; padding: 20px; }
.services-grid > .service-card-link .service-card-content, .services-grid > div .service-card-content, .app-about-feature-header h3, .favoriler-empty h3, .organik-package-header h3{ font-size: 18px; }
.services-grid > .service-card-link .service-card-overlay, .services-grid > div .service-card-overlay, .destek-success-modal .modal-body > div:first-child{ width: 48px; height: 48px; }
.feature-card, .solution-card{ padding: 12px; gap: 20px; border-radius: 12px; }
.feature-icon-wrapper{ width: 50px; height: 70px; }
.feature-icon-wrapper.icon-tall, .solution-card > div:first-child{ width: 60px; height: 125px; }
.feature-icon-wrapper.icon-tall svg, .solution-card > div:first-child svg{ width: 30px; height: 30px; }
.feature-card-content, .solution-card > div:last-child{ gap: 8px; }
.feature-card-title, .solution-card > div:last-child h3, .why-choose-us .card-content h3{ font-size: 16px; font-weight: 600; line-height: 1.193em; }
.feature-card-description, .solution-card > div:last-child p{ font-size: 14px; font-weight: 600; line-height: 1.286em; }
/* Solution Card - Mobile */
.siparis-sorgula-title, .telafi-talebi-title{ font-size: 20px; line-height: 24px; }
.siparis-sorgula-description{ line-height: 19px; font-size: 15px; justify-content: center; }
.telafi-talebi-form{ padding: 30px 20px; gap: 20px; }
.telafi-talebi-description{ line-height: 19px; font-size: 15px; }
/* Why Choose Us 768px stilleri homepage.css'e tasindi */
.comments .section-header{ margin-bottom: 24px; }
.comments-section{ margin-top: 20px; }
.comments-grid{ display: flex; flex-wrap: nowrap; gap: 12px; margin-bottom: 30px; justify-content: flex-start; align-items: flex-end; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 20px; margin-left: -20px; margin-right: -20px; width: 100%; min-height: auto; }
.comments-grid > li{ width: 120px; height: 120px; flex-shrink: 0; scroll-snap-align: center; }
.comments-grid > li img{ border-radius: 30px; }
.comments-grid > li.active{ width: 140px; height: 140px; }
.comments-grid > li > div:last-child{ top: -6px; left: -6px; width: 50px; height: 40px; }
.comment-banner{ display: none; }
.comment-badge{ top: 10px; right: 10px; padding: 12px; gap: 8px; }
.comment-badge > div:first-child{ padding: 8px; border-radius: 10px; }
.comment-badge > div:first-child svg, .organik-paketler .platform-filter svg{ width: 16px; height: 16px; }
.comment-badge span{ font-size: 14px; width: 130px; }
.comment-text::before{ left: calc(50% - 47px/2 + 0.5px); width: 25px; height: 25px; border-radius: 5px; }
.comment-text{ padding: 20px; gap: 16px; border-radius: 24px; max-width: 398px; width: 100%; }
.comment-author{ gap: 16px; }
.comment-author > div:first-child{ width: 36px; height: 36px; padding: 8px; }
.comment-author > div:first-child svg{ width: 20px; height: 20px; }
.comment-author > div:last-child{ width: fit-content; height: auto; }
.comment-author h4{ font-size: 16px;}
.comment-author p{ font-size: 14px;}
.kategori-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kategori-hizmetler{ padding: 40px 0; padding-top: 20px; }
.kategori-card, .paragraph-content{ max-width: 100%; }
.kategori-card .card-header h3{ font-size: 17px; }
.kategori-card p{ padding-bottom: 0; line-height: 25px; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
.deneme-banner, .siparis-card, .app-about-feature-card, .table-features, .table-cell-feature, .table-package, .table-cell-check{ padding: 16px; }
.ucretsiz-deneme-packages{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ucretsiz-deneme-package{ width: 100%; min-width: unset; height: 80px; border-radius: 12px; }
.ucretsiz-deneme-task{ padding: 16px; gap: 16px; min-height: 140px; }
.ucretsiz-deneme-task-content{ max-width: 274px; }
.ucretsiz-deneme-task-title{ font-size: 16px; line-height: 19.34px; }
.ucretsiz-deneme-task-description{ font-size: 14px; line-height: 18px; }
.ucretsiz-deneme-task-actions{ flex-direction: row; gap: 12px; }
.task-btn{ width: inherit; min-width: 0; height: 42px; font-size: 16px; line-height: 19.09px; }
/* Step 4 responsive */
.ucretsiz-deneme-complete-actions, .bakiye-list > li > div:last-child{ justify-content: center; }
.paragraph-item{ gap: 32px; margin-bottom: 40px; }
.araclar-slider{ overflow: visible; }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ left: 42% !important; }
.slide-content{ padding: 40px 32px; gap: 32px; }
.slide-text > div:last-child, .hero-content{ gap: 16px; }
.slider-pagination{ bottom: 20px; padding: 12px 16px; gap: 10px; }
.menu-card, .musteri-siparisler-details-header, .talep-form-container{ padding: 20px; }
.menu-item{ height: 40px; font-size: 13px; }
.content-card{ padding: 20px; gap: 20px; }
/* Sinirsiz servis 768px stilleri homepage.css'e tasindi */
.iletisim-info-card{ padding: 20px; gap: 24px; }
.iletisim-icon-wrapper{ width: 50px; height: 61px; border-radius: 12px; }
.iletisim-icon-wrapper svg, .paket-adimlar-wrapper .paket-type-tab svg{ width: 20px; height: 20px; }
.iletisim-info-text h4, .hero-content p, .destek-success-modal .modal-body p, .destek-success-btn{ font-size: 16px; }
.platform-section, .musteriler-bag-kurun-section{ padding: 30px 0; }
.service-card{ max-width: 100%; padding: 16px; }
.service-header{ height: 77px; padding: 16px; }
.service-header > div:first-child{ width: 48px; height: 48px; left: 12px; top: 14px; }
.service-header > div:first-child svg, .adim-bottom-bar > div:last-child > button svg{ width: 22px; height: 22px; }
.service-header h3{ font-size: 16px; left: 72px; }
.odeme-ekrani-section{ padding: 0 0 60px 0; }
.odeme-card, .odeme-summary-card, .odeme-step-card{ padding: 24px 20px; }
.odeme-bank-box{ padding: 20px; height: auto; min-height: 94px; display: flex; align-items: center; justify-content: center; text-align: center; }
.odeme-bank-header, .musteri-pagination-wrapper{ flex-direction: column; align-items: center; gap: 16px; }
.siparis-detay{ gap: 24px; padding: 20px; margin-bottom: 0; margin-top: 20px; }
/* Keep horizontal layout on mobile - icon and info side by side */
.card-header{ flex-direction: row; align-items: center; gap: 20px; }
/* Icon sizing from Figma mobile design */
.card-header > div:first-child{ width: fit-content; height: 119px; flex-shrink: 0; }
.card-info h4{ font-size: 16px; line-height: 1.21; }
.card-info p:nth-of-type(1){ font-size: 16px; line-height: 2.16; }
.card-info p:last-child{ font-size: 12px; line-height: 1.5;
/* Allow URL to wrap to multiple lines on mobile */ white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }
/* Footer layout - keep horizontal stats, vertical badge */
.card-footer{ flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
.card-stats, .app-about-cards-column, .mesaj-actions{ gap: 20px; }
.card-badge{ padding: 10px 12px; border-radius: 8px; }
.odeme-ozeti{ padding: 24px; margin-top: 0; }
.odeme-ozeti-row span:first-child{ font-size: 14px; width: auto; max-width: 140px; }
.telafi-talebi-page .card-badge{ padding: 10px 12px; }
/* Card: exact Figma mobile dimensions */
.adim-card{ padding: 0; border-radius: 16px; border-top: none; border-left: 1px solid #EAEAED; border-right: 1px solid #EAEAED; border-bottom: 1px solid #EAEAED; gap: 16px; }
/* Back button - positioned at top */
.back-btn{ margin: 16px 16px 0 16px; }
/* Service Info - positioned after back button */
.adim-info{ width: auto; margin: 24px; margin-bottom: 0; }
.adim-info h3{ font-size: 16px; line-height: 1.209; }
.adim-info p{ font-size: 15px; line-height: 1.177; }
/* Input Wrapper - exact Figma mobile dimensions */
.paket-adimlar-input-wrapper{ flex-direction: row; flex-wrap: nowrap; gap: 15px; padding: 15px; height: 66px; margin: 0 16px; width: calc(100% - 32px); border: 2px solid rgba(234, 234, 237, 0.5); }
.paket-adimlar-input-wrapper svg{ width: 20px; height: 20px; flex-shrink: 0; }
.paket-divider{ display: block; width: 1px; height: 20px; background: rgba(102, 111, 148, 0.1); flex-shrink: 0; }
.paket-adimlar-input-content{ flex: 1; width: auto; min-width: 0; gap: 4px; }
.paket-adimlar-input-label{ font-size: 13px; line-height: 1.538; }
.paket-adimlar-input-field, .paket-warning p{ font-size: 15px; line-height: 1.333; }
/* Warning - exact Figma mobile dimensions */
.paket-warning{ flex-direction: row; align-items: center; gap: 10px; height: auto; min-height: 70px; padding: 15px; margin: 0 16px 16px 16px; text-align: left; }
.paket-warning svg{ width: 22px; height: 22px; flex-shrink: 0; }
/* Tabs - exact Figma mobile positioning */
.paket-adimlar-wrapper .paket-type-tabs{ gap: 10px; height: 60px; justify-content: space-between; margin-bottom: 0; }
.paket-adimlar-wrapper .paket-type-tab{ flex: 1; max-width: 194px; padding: 20px; border-radius: 12px 12px 0 0; }
.paket-adimlar-wrapper .paket-type-tab span{ font-size: 16px; line-height: 1.193; }
/* Step 2: Result Wrapper */
.paket-adimlar-result-wrapper{ margin: 0 16px 16px 16px; gap: 16px; }
/* Input Display - exact Figma mobile */
.input-display{ flex-wrap: nowrap; margin: 0; width: 100%; }
.input-display-content{ width: 100%; flex: 1; }
.input-display-content > div:last-child, .musteri-destek-search, .musteri-destek-filter, .musteri-destek-list .filter-wrapper{ width: auto; flex: 1; min-width: 0; }
/* Hide desktop badge on mobile */
/* Mobile-only badge (outside input) */
.input-display-badge.mobile-only{ width: 100%; height: 50px; padding: 0; background: rgba(120, 68, 228, 0.1); border-radius: 12px; display: flex !important; align-items: center; justify-content: center; }
.input-display-badge.mobile-only span{ font-size: 16px; font-weight: 600; line-height: 1.193; color: #7844E4; }
/* Account Card - exact Figma mobile */
.account-card{ padding: 16px; gap: 10px; border-radius: 16px; }
.account-header{ flex-direction: column; align-items: flex-start; gap: 10px; }
.account-profile > div:first-child, .account-profile > div:first-child img{ width: 50px; height: 50px; }
.account-info h4, .stat-value{ font-size: 16px; line-height: 1.25; }
.account-info p{ font-size: 14px; line-height: 1.429; }
/* Horizontal divider between profile and stats */
.account-header::after{ content: ''; width: 100%; height: 1px; background: rgba(102, 111, 148, 0.1); border-radius: 20px; order: 2; }
.account-profile{ order: 1; }
.account-stats{ width: 100%; gap: 20px; order: 3; }
.paket-adimlar-stat{ flex: 0 0 auto; }
.paket-adimlar-stat-label{ font-size: 14px; line-height: 1.177; }
/* Show green increment badge on mobile */
/* Bottom Bar - Mobile: Simple quantity + Add to Cart button */
.adim-bottom-bar{ flex-direction: column; gap: 16px; margin: 0; width: 100%; }
.adim-bottom-bar > div:first-child{ width: 100%; background: #FFFFFF; border: 1px solid rgba(228, 231, 235, 0.5); border-radius: 12px; padding: 10px; gap: 10px; }
.adim-bottom-bar .icon-wrapper{ width: 54px; height: 54px; background: #7844E4; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.adim-bottom-bar .quantity-control{ flex: 1; width: auto; gap: 24px; justify-content: space-between; }
.adim-bottom-bar .quantity-control > button, .referans-copy-btn{ width: 34px; height: 34px; }
.adim-bottom-bar .quantity-control > input, .adim-bottom-bar .qty-input-wrapper > input{ font-size: 16px; line-height: 1.125; text-align: center; }
.adim-bottom-bar > div:last-child{ width: 100%; padding: 0; }
.adim-bottom-bar > div:last-child > button{ width: 100%; height: 50px; background: #FF5601; border: none; border-radius: 12px; gap: 10px; padding: 14px; }
.adim-bottom-bar > div:last-child > button:hover{ background: #E04D01; }
.adim-bottom-bar > div:last-child > button span{ font-size: 16px; font-weight: 600; line-height: 1.193; }
.paket-adimlar-post-image-wrapper{ width: 120px; height: 120px; padding: 6px; }
.paket-adimlar-post-increment-badge, .post-grid-item > div:last-child{ font-size: 12px; padding: 4px 8px; bottom: 8px; }
/* Grid adjustments for mobile - 2 items per row */
.post-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
.post-grid-item{ width: 100%; height: auto; aspect-ratio: 1; padding: 6px; }
.paket-adimlar-upsell-wrapper{ padding: 0 16px; }
.upsell-grid{ grid-template-columns: 1fr; gap: 22px; }
.upsell-card{ flex-direction: column; align-items: flex-start; padding: 17px; gap: 16px; }
.upsell-discount-badge{ top: -14px; right: 16px; padding: 10px; gap: 10px; font-size: 13px; line-height: 16px; border-radius: 26px; background: #E8F8F1; border: 1px solid rgba(23, 185, 118, 0.2); color: #17B976; }
.upsell-card-header{ flex-wrap: wrap; align-items: center; gap: 16px; width: 100%; }
.upsell-card-title{ flex: 0 0 auto; min-width: 0; }
.upsell-card-header > .upsell-slider-wrapper{ flex: 0 0 100%; height: 22px; }
.upsell-body{ flex-direction: column; gap: 10px; width: 100%; }
.upsell-stats{ flex-direction: column; gap: 10px; }
/* Bottom section */
.paket-adimlar-upsell-bottom{ flex-direction: column; gap: 16px; }
.upsell_actions{ width: 100%; flex-direction: column-reverse; margin-bottom: 16px; gap: 10px; }
.upsell_btn{ width: 100% !important; }
/* Musteriler 768px stilleri homepage.css'e tasindi */
.referans-confirm-text h3, .destek-success-modal .modal-body h3{ font-size: 20px; }
.faq-notification > div:last-child p:last-child{ font-size: 12px; max-width: 180px; }
.app-about-header{ margin-bottom: 32px; }
.app-about-content{ gap: 30px; }
.app-about-phone-wrapper{ max-width: 300px; }
.uygulama{ padding: 50px 0 60px; }
.uygulama .store-buttons{ gap: 0; width: 100%; }
.uygulama .store-buttons > a{ width: 100%; max-width: 200px; }
.uygulama .app-phones img{ max-width: 320px; }
.faq-section{ padding: 50px 0; }
.faq-left{ width: 100%; max-width: 380px; height: 350px; }
.faq-left > img:first-child{ left: 8px; width: calc(100% - 16px); height: 350px; }
.faq-images{ left: 50px; width: 200px; height: 320px; }
.faq-images img{ left: 40px; }
.faq-crown{ left: 50px; top: 80px; width: 50px; height: 50px; }
.faq-notification{ padding: 10px; }
.faq-notification-1{ left: 0; top: 240px; }
.faq-notification-2{ left: 100px; top: 190px; }
.faq-notification > div:first-child{ width: 35px; height: 35px; }
.faq-right h2{ font-size: 24px; margin-bottom: 24px; }
.musteri-destek-list .musteri-siparisler-empty-state img{ transform: translateY(15px); }
/* Mobile: Vertical layout with top section and button below */
.musteri-siparis-card{ flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.musteri-siparis-card-top, .musteri-siparis-card > div:first-child{ display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; }
.musteri-siparis-left, .musteri-siparis-card > div:first-child > div:first-child{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.musteri-siparis-info, .musteri-siparis-card > div:first-child > div:first-child > div:last-child{ display: flex; flex-direction: column; gap: 2px; }
.musteri-siparis-label, .musteri-siparis-card > div:first-child > div:first-child > div:last-child span:first-child, .musteri-siparis-amount-label, .musteri-siparis-card > div:first-child > div:last-child span:first-child{ font-size: 13px; font-weight: 600; color: #7A7F99; line-height: 1.54em; }
.musteri-siparis-code, .musteri-siparis-card > div:first-child > div:first-child > div:last-child span:last-child, .musteri-siparis-amount, .musteri-siparis-card > div:first-child > div:last-child span:last-child{ font-size: 15px; font-weight: 600; color: #33353E; line-height: 1.33em; }
.musteri-siparis-amount-wrapper, .musteri-siparis-card > div:first-child > div:last-child{ display: flex; flex-direction: column; text-align: right; gap: 2px; flex: 0 0 auto; }
/* Button moves to bottom on mobile */
.musteri-siparis-btn{ width: 100%; margin-left: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.43em; text-align: center; }
.musteri-siparisler-empty-state{ flex-direction: column-reverse; text-align: center; }
.favoriler-empty{ flex-direction: column-reverse; text-align: center; padding: 16px; }
.favoriler-empty img, .musteri-siparisler-empty-image{ width: 173px; height: 303px; transform: translateY(16px); }
.favoriler-empty .empty-btn, .musteri-siparisler-empty-btn{ width: 100%; padding: 12px 20px; font-size: 15px; }
.musteri-destek-list .musteri-section-header{ flex-direction: column; align-items: flex-start; gap: 16px; }
.musteri-destek-controls{ width: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.musteri-destek-ticket-card{ flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
.musteri-destek-ticket-right{ flex-direction: column; align-items: stretch; width: 100%; gap: 16px; }
.musteri-destek-ticket-badges{ width: 100%; justify-content: space-between; gap: 16px; }
.musteri-destek-ticket-badge{ font-size: 12px; padding: 6px 10px; width: fit-content; }
.referans-transaction-card{ align-items: flex-start; gap: 16px; }
.transaction-earning{ align-self: flex-end; }
.musteri-siparisler-details-content{ padding: 16px; gap: 12px; }
.musteri-siparisler-service-header{ padding: 14px; }
.musteri-siparisler-service-details{ padding: 14px; gap: 12px; }
.siparisler-label{ font-size: 11px; }
.musteri-siparisler-service-icon-wrapper{ width: 36px; height: 36px; }
.musteri-siparisler-service-icon-wrapper svg, .referans-copy-btn svg{ width: 18px; height: 18px; }
.musteri-siparisler-details-date-wrapper{ width: auto; }
.musteri-pagination-info{ font-size: 12px; text-align: center; }
.musteri-pagination-buttons{ gap: 4px; }
.musteri-pagination-btn{ width: 32px; height: 32px; padding: 12px 16px; font-size: 11px; }
.musteri-pagination-dots{ font-size: 14px; padding: 0 4px; }
.destek-mesajlasma-header{ align-items: center; gap: 12px; }
.mesajlar-wrapper{ padding: 15px; }
.mesaj-header{ width: 100%; max-width: 370px; }
.mesaj-bubble{ width: 100%; max-width: 366.51px; }
.talep-input{ padding: 12px; }
.referans-link-card{ height: auto; min-height: 84px; padding: 14px; }
.link-content{ gap: 14px; }
.link-content > div:last-child > div:last-child{ line-height: 16px; word-break: break-all; }
.referans-stats-grid, .musteri-ayarlar-form-row-triple{ grid-template-columns: 1fr; }
.referans-convert-btn{ position: relative; right: auto; top: auto; transform: none; margin-left: auto; }
.referans-convert-btn:hover{ transform: scale(1.02); }
.referans-convert-btn:active{ transform: scale(0.98); }
.stat-card-with-action .stat-content{ gap: 12px; }
.stat-card-with-action .stat-content > div:nth-child(2){ padding-right: 0; width: 100%; align-items: start; }
.stat-card-with-action .stat-content > div:nth-child(2) > div{ text-align: center; }
.referans-confirm-modal-body, .destek-success-modal .modal-body{ padding: 40px 24px; gap: 24px; }
.referans-confirm-actions button{ width: 100%; height: 50px; font-size: 15px; }
.bakiye-list > li{ align-items: flex-start; gap: 16px; padding: 16px; }
.quick-amounts{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
/* iOS smooth scroll */ scrollbar-width: none;
/* Firefox scrollbar gizle */ -ms-overflow-style: none;
/* IE scrollbar gizle */ padding-bottom: 4px;
/* Scrollbar için alan */ }
/* Scrollbar gizle - Chrome/Safari */
.quick-amounts > li{ flex: 0 0 auto; min-width: 90px; white-space: nowrap; }
.bakiye-content{ align-items: stretch; }
.musteri-ayarlar-form-row{ grid-template-columns: 1fr; gap: 16px; }
.musteri-ayarlar-dropdown-wrapper{ padding: 12px !important; }
.musteri-ayarlar-phone-wrapper{ padding: 12px 12px 12px 8px !important; }
.avatar-list{ grid-template-columns: repeat(4, 1fr); gap: 12px; }
.avatar-list > li{ width: 70px; height: 70px; }
.hero-content h1{ font-size: 28px; letter-spacing: -0.32px; }
.hero-buttons .btn-outline, .hero-buttons .btn-primary{ width: 100%; padding: 12px 20px; }
.ekstra-paketler-avatar{ width: 120px; height: 120px; }
.organik-paketler{ padding: 40px 0 0; }
.organik-paketler .platform-filters{ padding: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
/* Firefox */ -ms-overflow-style: none;
/* IE and Edge */ }
.organik-paketler .platform-filter{ padding: 8px 15px; flex-shrink: 0; white-space: nowrap; }
.organik-paketler .duration-filter{ padding: 8px 20px; min-width: 80px; }
.organik-package-header{ padding: 30px 30px 0 30px; }
.organik-package-content{ padding: 0 30px 30px 30px; gap: 20px; }
.organik-package-limited-badge{ top: 43px; right: 30px; }
.organik-package-content > div:first-child{ margin-top: 34px; }
.organik-package-content button, .organik-package-features{ width: 100%; max-width: 100%; }
/* Further reduce padding for very small screens */
.eposta-input-wrapper{ width: 100%; max-width: 436px; }
.destek-success-modal .modal-dialog{ margin: 16px; max-width: calc(100% - 32px); } }
/* ===============================================================
   MOBILE LARGE & BELOW (max-width: 768px)
   =============================================================== */
@media screen and (max-width: 768px) {
.copyright-wrapper > div:first-child p{ text-align: left; font-size: 10px; line-height: 16px; }
.services-menu-section.active .services-menu-section-content{ max-height: 485px; overflow: auto; }
.services-menu-section[data-section="ucretsiz-araclar"].active .services-menu-section-content, .services-menu-section[data-section="dijital-pazarlama"].active .services-menu-section-content{ max-height: 420px; overflow: auto; }
.signin-register-link, .signup-signin-link{ text-align: center; }
[data-modal-type="telafi"] .telafi-talebi-form{ height: 415px; }
.paragraph-image img{ max-height: 400px; }
.faq-notification-1{ bottom: unset; }
.referans-confirm-text p{ font-size: 15px; } 
.slide-image img {display:none;}
.video-bento-card .card-header {display: grid;}}
/* ===============================================================
   MOBILE & BELOW (max-width: 767px)
   =============================================================== */
@media (max-width: 767px) {
.mobile-hidden{ display: none !important; } }
/* ===============================================================
   DESKTOP & ABOVE (min-width: 577px)
   =============================================================== */
@media (min-width: 577px) {
.musteri-siparisler-details-modal, .musteri-siparisler-modal-backdrop{ display: none !important; } }
/* ===============================================================
   MOBILE & BELOW (max-width: 576px)
   =============================================================== */
@media (max-width: 576px) {
.musteri-siparisler-wrapper{ grid-template-columns: 1fr; } }
/* ===============================================================
   MOBILE & BELOW (max-width: 575px)
   =============================================================== */
@media (max-width: 575px) {
.musteri-favoriler-grid{ grid-template-columns: repeat(1, 1fr); }
.musteri-pagination-btn{ width: 30px; height: 30px; } }
/* ===============================================================
   MOBILE & BELOW (max-width: 520px)
   =============================================================== */
@media (max-width: 520px) {
.platform-grid{ grid-template-columns: repeat(2, minmax(160px, 208px)); gap: 10px; }
.platform-card{ width: 100%; } }
/* ===============================================================
   MOBILE & BELOW (max-width: 480px)
   =============================================================== */
@media (max-width: 480px) {
.content-title, .slide-text h2{ font-size: 24px; line-height: var(--lh-tight); }
.content-text p, .notification-title, .hero-description-dark, .hero-container-base .hero-text-container p, .kategori-header .hero-text-container p, .search-box input, .form-header p, .services-grid > .service-card-link .service-card-content span, .services-grid > div .service-card-content span, .feature-link, .solution-card > div:last-child span, .comment-author h4, .comment-author p, .deneme-header p, .deneme-warning p, .ucretsiz-deneme-description, .ucretsiz-deneme-warning p, .slide-text p{ font-size: 14px; }
.heading-section, .hero-title-dark, .hero-container-base .hero-text-container h1, .kategori-header .hero-text-container h1, .services-menu-item i, .services-menu-item span, .why-choose-us .section-header h2{ font-size: 20px; }
.text-body, .ucretsiz-araclar .hero-badge span, .notification-text, .section-header p, .solutions .section-header p, .section-header p, .comments .section-header p, .deneme-features > div:not(:nth-child(even)) span, .ucretsiz-deneme-feature span, .service-item span, .show-more, .faq-notification > div:last-child p:first-child, .faq-items > li .faq-content p{ font-size: 13px; }
.badge-light{ width: 140px; height: 34px; }
.badge-light span, .hero-badge span, .service-header h3 .platform-service{ font-size: 12px; }
/* Wider badge for more text */
.ucretsiz-araclar .hero-badge{ width: 150px; }
.badge{ padding: 5px 8px; height: 24px; }
.badge svg{ width: 12px; height: 12px; }
.badge span{ font-size: 11px; }
.badge-group > div:not(:first-child), .paket-type-tab svg, .faq-crown svg{ width: 20px; height: 20px; }
.nav-cta, .musteriler-left-card, .musteriler-right-card, .organik-paketler .platform-filters{ width: 100%; }
.kategori-header .tabs-container{ width: fit-content; }
.packages-filter-tabs{ width: fit-content; }
.tab, .kategori-tab{ font-size: 12px; padding: 8px 14px; }
.notifications-dropdown, .odeme-card, .odeme-summary-card, .odeme-step-card{ padding: 20px 16px; }
.nav-pill-icon{ width: 36px; height: 36px; }
.section-padding, .hero{ padding: 32px 0; }
.section-header{ margin-bottom: 18px; }
.section-header h2, .section-header h3, .solutions .section-header h2, .section-header h2{ font-size: 22px; }
/* Legacy classes - kept for backward compatibility */
.hero-card-dark{ padding: 32px 16px; gap: 12px; }
.hero-badge{ padding: 8px 16px; }
/* Hero Search Box - Mobile */
.hero-card-dark .search-box{ gap: 12px; height: auto; padding: 12px 16px; }
.search-box > div:nth-child(2){ height: 16px; }
.search-box button{ width: 80px; height: 40px; padding: 10px; font-size: 14px; }
.contact-form{ padding: 20px; }
.form-header h3, .services-grid > div .service-card-content{ font-size: 16px; }
.service-pill{ font-size: 13px; padding: 12px; }
.iletisim-social-link{ width: 45px; height: 45px; }
.clients-grid, .hero-avatars{ gap: 10px; }
.client-logo-card{ width: 170px; height: 80px; }
.client-logo-card img{ width: 100px; }
.paket-type-tab, .paket-selection-card, .deneme-card, .ucretsiz-deneme-card, .odeme-bank-box{ padding: 16px; }
/* Grid handles sizing automatically */
.paket-users-avatars img{ width: 32px; height: 32px; }
.app-badge{ width: 140px; }
/* Hero slider small mobile stilleri homepage.css'e tasindi */
.uygulama .app-text h2, .hero-content h1{ font-size: 24px; }
.services-menu-grid{ grid-template-columns: repeat(3, 1fr); }
.services-tools-grid{ grid-template-columns: 1fr; }
.services-section, #platform-section{ padding: 0 0 40px 0; }
.services-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.services-grid > .service-card-link, .services-grid > div{ width: 100%; height: 76px; border-radius: 16px; padding: 16px; }
.services-grid > .service-card-link .service-card-overlay, .services-grid > div .service-card-overlay{ width: 44px; height: 44px; border-radius: 11.79px; }
.services-grid > .other-card .service-card-overlay.service-card-overlay-other{ background: rgba(51, 53, 62, 0.06); border: 0.79px solid rgba(210, 210, 210, 0.5); }
.feature-card, .solution-card{ padding: 12px; gap: 20px; border-radius: 12px; }
.feature-icon-wrapper{ width: 60px; height: 60px; }
.feature-icon-wrapper.icon-tall, .solution-card > div:first-child{ width: 60px; height: 125px; }
.feature-icon-wrapper.icon-tall svg, .solution-card > div:first-child svg, .faq-notification > div:first-child{ width: 30px; height: 30px; }
.feature-card-content, .solution-card > div:last-child, .service-item > div:first-child{ gap: 8px; }
.feature-card-title, .solution-card > div:last-child h3{ font-size: 16px; font-weight: 600; line-height: 1.193em; }
.feature-card-description, .solution-card > div:last-child p{ font-size: 14px; font-weight: 600; line-height: 1.286em; }
/* Solution Card - Small Mobile */
.why-choose-us, .comments{ padding: 30px 0; }
.comments .section-header h2{ font-size: 20px; max-width: 250px; margin: 0 auto; margin-bottom: 20px; }
.comments-grid{ gap: 10px; padding: 0 16px; overflow-x: visible; padding-top: 10px; width: 100%;}
.comments-grid > li{ width: 110px; height: 110px; }
.comments-grid > li img{ border-radius: 24px; }
.comments-grid > li.active{ width: 140px; height: 140px; }
.comments-grid > li > div:last-child{ top: -5px; left: -5px; width: 40px; height: 32px; }
.comment-badge{ top: 0px; right: -50px; padding: 10px; gap: 6px; border-radius: 12px; }
.comment-badge > div:first-child{ padding: 6px; border-radius: 8px; }
.comment-badge > div:first-child svg{ width: 14px; height: 14px; }
.comment-badge span{ font-size: 12px; text-align: start; }
.comment-text::before{ left: calc(50% - 40px/2 + 0.5px); top: -12px; width: 25px; height: 25px; border-radius: 4px; }
.comment-text{ padding: 20px; gap: 16px; border-radius: 20px; max-width: 398px; width: 100%; }
.comment-quote > div:first-child{ width: 40px; height: 28px; }
.comment-author{ gap: 16px; }
.comment-author > div:first-child{ width: 36px; height: 36px; padding: 8px; }
.comment-author > div:first-child svg{ width: 20px; height: 20px; }
.comment-author > div:last-child{ width: fit-content; height: auto; }
.comment-author h4{ font-size: 16px; }
.comment-author p{ font-size: 14px; }
.kategori-grid{ grid-template-columns: 1fr; gap: 16px; }
.kategori-card{ max-width: 100%; }
.deneme-submit-btn, .ucretsiz-deneme-submit-btn{ height: 48px; font-size: 15px; }
/* Legacy support */
.paragraph-item{ gap: 24px; margin-bottom: 32px; }
.paragraph-text, .slide-text, .faq-items{ gap: 16px; }
.slide-content{ padding: 32px 24px; gap: 24px; border-radius: 16px; }
.slide-text > div:last-child{ gap: 12px; }
.slider-pagination{ bottom: 16px; padding: 10px 14px; gap: 8px; }
.slider-pagination .swiper-pagination-bullet{ width: 6px; height: 6px; }
.slider-pagination .swiper-pagination-bullet-active{ width: 30px; }
/* Hakkimizda slider 480px responsive styles */
#hakkimizda-slider .slide.active{ height: 350px; }
#hakkimizda-slider .slide-text span{ font-size: 24px; }
.service-card{ padding: 12px; gap: 8px; }
.service-header{ padding: 12px; }
.service-header h3{ font-size: 14px; left: 68px; }
.service-item{ height: 48px; padding: 0 12px 0 8px; }
.service-item > div:first-child svg{ width: 28px; height: 28px; }
.service-item > svg{ width: 15px; height: 15px; }
.odeme-info-value-wrapper{ padding: 10px 12px; }
.odeme-input-wrapper{ padding: 12px 14px; }
.odeme-warning-box{ padding: 12px 12px 12px 28px; }
.odeme-warning-box svg{ margin-top: 40px; }
.card-header, .card-stats, .musteriler-nav-arrows{ gap: 20px; }
.card-header > div:first-child{ width: fit-content; height: 119px; }
.card-stat{ min-width: auto; }
.odeme-ozeti{ padding: 20px; gap: 14px; }
.odeme-ozeti-details{ gap: 14px; }
/* Keep row layout on mobile - label and value side by side */
.odeme-ozeti-row{ justify-content: space-between; }
.odeme-ozeti-row span:first-child{ width: auto; max-width: 140px; flex-shrink: 0; }
.odeme-ozeti-row span:last-child{ text-align: right; flex: 1; }
/* Musteriler 480px stilleri homepage.css'e tasindi */
.uygulama{ padding: 40px 0 50px; }
.uygulama .app-text p{ font-size: 14px; line-height: 1.5em; text-align: start; }
.uygulama .app-text{ gap: 20px; align-items: start; }
.uygulama .app-phones img{ max-width: 280px; }
.faq-section{ padding: 40px 0; }
.faq-left{ max-width: 320px; height: 300px; }
.faq-left > img:first-child{ height: 300px; }
.faq-images{ left: 40px; width: 160px; height: 270px; }
.faq-crown{ left: 40px; top: 60px; width: 45px; height: 45px; }
.faq-notification-2{ left: 80px; top: 160px; }
.faq-notification > div:first-child svg, .faq-items > li .faq-header > div:last-child svg{ width: 16px; height: 16px; }
.faq-notification > div:last-child p:last-child{ font-size: 11px; max-width: 150px; }
.faq-right h2{ font-size: 22px; margin-bottom: 20px; }
.faq-items > li .faq-header span{ font-size: 15px; line-height: 1.6em; }
.faq-items > li .faq-header > div:last-child{ width: 26px; height: 26px; }
.hero-content p, .hero-buttons .btn-outline, .hero-buttons .btn-primary{ font-size: 15px; }
.ekstra-paketler-avatar{ width: 100px; height: 100px; } }
/* ===============================================================
   SMALL MOBILE & BELOW (max-width: 429px)
   =============================================================== */
@media (max-width: 429px) {
.card-footer{ flex-direction: column; align-items: flex-start; gap: 16px; }
.card-stats{ width: 100%; gap: 16px; justify-content: space-between; }
.card-badge{ align-self: center; justify-content: center; width: 100%; } }
/* ===============================================================
 SMALL MOBILE & BELOW (max-width: 400px)
 =============================================================== */
@media (max-width: 400px) {
.platform-grid{ grid-template-columns: 1fr 1fr; } }
/* ===============================================================
 MEGA MENU RESPONSIVE STYLES
 =============================================================== */
/* Desktop - Fine-tune mega menu for smaller screens */
@media (min-width: 992px) and (max-width: 1199px) {
.mega-menu{ width: 960px; }
.menu-sidebar{ width: 220px; }
.menu-sidebar > li{ height: 70px; padding: 0 16px; }
.menu-sidebar > li > div:first-child{ width: 34px; height: 34px; }
.menu-sidebar > li > div:first-child i{ font-size: 18px; }
.menu-sidebar > li > div:last-child > span:first-child{ font-size: 13px; }
.menu-packages{ padding: 16px 24px; }
.packages-banner > div:first-child{ width: 50px; height: 50px; }
.packages-banner h3{ font-size: 14px; }
.menu-promo{ width: 240px; padding: 24px 28px; }
.promo-card{ width: 184px; }
.promo-card img{ height: 160px; } }
/* ============================================
 MOBILE MEGA MENU SEARCH MODE
 ============================================ */
@media (max-width: 768px) {
/* Mobile Platform Filter (search mode only) */
.mobile-platform-filter{ display: none; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; scrollbar-width: none; -ms-overflow-style: none; order: 2; margin-bottom: -20px; }
.mega-menu.search-active .mobile-platform-filter{ display: flex; }
.mobile-platform-filter::-webkit-scrollbar, .mobile-platform-filter-item.active:first-child::before, .mobile-platform-filter-item.active:last-child::after, .mega-menu.search-active .menu-pane, .mega-menu.search-active .packages-banner, .mega-menu.search-active .packages-header, .mega-menu.search-active .packages-footer, .mega-menu.search-active .menu-sidebar, .mega-menu.search-active .menu-pane:not(.active){ display: none; }
.mobile-platform-filter-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; cursor: pointer; transition: opacity 0.2s; width: 122px; height: 90px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.mobile-platform-filter-item:active{ opacity: 0.7; }
.mobile-platform-filter-item.active{ background-color: #F9FAFE; }
.mobile-platform-filter-item > div:first-child{ width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mobile-platform-filter-item > div:first-child i{ font-size: 22px; color: #FFFFFF; }
.mobile-platform-filter-item > span{ font-weight: 600; font-size: 15px; line-height: 18px; color: #4C5473; white-space: nowrap; }
/* Active platform indicator with background */
.mobile-platform-filter-item.active{ position: relative; background: #F9FAFE; border-radius: 16px 16px 0 0; padding-bottom: 10px; margin-bottom: -10px; }
.mobile-platform-filter-item.active > div:first-child{ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); }
/* Curved corners for active platform filter item - bottom corners */
.mobile-platform-filter-item.active::before, .mobile-platform-filter-item.active::after{ content: ""; position: absolute; bottom: 0; width: 16px; height: 16px; background-color: transparent; z-index: 1; pointer-events: none; }
/* Left corner arc - mask creates the curve */
.mobile-platform-filter-item.active::before{ left: -16px; background: #F9FAFE; -webkit-mask: radial-gradient(circle at top left, transparent 70%, black 71%); mask: radial-gradient(circle at top left, transparent 70%, black 71%); }
/* Right corner arc - mask creates the curve */
.mobile-platform-filter-item.active::after{ right: -16px; background: #F9FAFE; -webkit-mask: radial-gradient(circle at top right, transparent 70%, black 71%); mask: radial-gradient(circle at top right, transparent 70%, black 71%); }
/* Hide left corner if it's the first item (no gap on left) */
/* Hide right corner if it's the last item (no gap on right) */
/* Search mode adjustments */
.mega-menu.search-active .menu-body{ min-height: 0; flex-direction: column; gap: 16px; }
.mega-menu.search-active .menu-packages{ background: #F9FAFE; padding: 16px; }
.mega-menu.search-active .packages-panes{ display: flex; flex-direction: column; gap: 30px; overflow-y: auto; grid-template-columns: none; }
.mega-menu.search-active .menu-pane.active{ display: block; }
.mega-menu.search-active .pane-grid{ display: flex; flex-direction: column; gap: 30px; grid-template-columns: none; }
.mega-menu.search-active .package-item{ gap: 10px; }
.mega-menu.search-active .package-item > div:last-child > span:first-child{ font-size: 12px; line-height: 18px; }
.mega-menu.search-active .package-item > div:last-child > span:last-child{ font-size: 14px; line-height: 22px; }
/* Hide banner, header, footer in search mode */
/* Hide tabs/sidebar in search mode */
/* Adjust menu body in search mode */
.mega-menu.search-active .menu-body{ flex-direction: column; gap: 16px; }
/* Adjust packages container in search mode */
.mega-menu.search-active .menu-packages{ border-radius: 16px; padding: 16px; background: #F9FAFE; }
/* Seamless connection with active platform filter - JS will add these classes */
.mega-menu.search-active.filter-first-active .menu-packages{ border-top-left-radius: 0; }
.mega-menu.search-active.filter-last-active .menu-packages{ border-top-right-radius: 0; }
.mega-menu.search-active.filter-middle-active .menu-packages{ border-top-left-radius: 16px; border-top-right-radius: 16px; }
/* If only one filter item - remove both corners */
.mega-menu.search-active.filter-only-active .menu-packages{ border-top-left-radius: 0; border-top-right-radius: 0; }
/* Adjust mega menu structure for search mode */
.mega-menu.search-active{ display: flex; flex-direction: column; gap: 16px; }
/* Show only one pane at a time on mobile search */ }
@media (max-width: 820px) and (min-width: 471px) {
.kategori-tabs-container{ margin-left: 0; } }
/* ===============================================================
   AUTH MODAL RESPONSIVE (from auth.css - Phase 5)
   =============================================================== */
@media (max-width: 1200px) {
.login--area{ max-width: 95%; }
.login-area_action{ padding: 32px; } }
@media (max-width: 991px) {
#auth-section-wrapper{ padding: 15px; align-items: flex-start; }
.login--area{ flex-direction: column; max-width: 100%; gap: 0; }
.login-area_image{ display: none; }
.login-area_action{ flex: 0 0 100%; max-width: 100%; padding: 30px; border-radius: 30px; }
.close-auth-btn{ top: 15px; right: 15px; }
.step h3, .forgot-substep h3{ font-size: 22px; }
.step > p, .forgot-substep > p{ font-size: 16px; } }
@media (max-width: 576px) {
#auth-section-wrapper{ padding: 10px; }
.login-area_action{ padding: 24px; border-radius: 24px; }
.log-input, .auth-input-wrapper{ padding: 12px; gap: 12px; min-height: 60px; }
.log-control{ font-size: 15px; }
.step h3, .forgot-substep h3{ font-size: 20px; }
.step > p, .forgot-substep > p{ font-size: 15px; }
.butto{ height: 48px; font-size: 15px; }
.social-btn{ height: 48px; }
.social-btn svg{ width: 26px; height: 26px; } }

/* IFRAME Media Services */
@media (max-width: 768px) { section.video-bento .video-bento-center iframe{ width: 100%; } }
@media (max-width:1280px){.renkli-tab img{height:120px;border-radius:10px;padding:8px}.renkli-tab.active{margin-bottom:-17px;padding-bottom:26px}.renkli-tab.active::before,.renkli-tab.active::after{width:24px;height:24px}.renkli-tab.active::before{left:-24px}.renkli-tab.active::after{right:-24px}.renkli-right{width:450px}}
@media (max-width:991px){.renkli-tabs{gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.renkli-tab{width:140px;height:180px;flex-shrink:0;margin-bottom:6px}.renkli-tab.active{margin-bottom:-10px;padding-bottom:18px}.renkli-tab.active::before,.renkli-tab.active::after{width:20px;height:20px}.renkli-tab.active::before{left:-20px}.renkli-tab.active::after{right:-20px}.renkli-tab img{height:90px;border-radius:10px;padding:8px}.renkli-tab h4{font-size:14px}.renkli-tab p{font-size:11px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.renkli-content{margin-top:6px}.renkli-content.active{flex-direction:column;margin-top:-2px}.renkli-left{padding:30px}.renkli-left h2{font-size:24px;line-height:32px}.renkli-left>p{font-size:16px;line-height:24px}.renkli-right{width:100%;padding:20px;border-radius:0 0 30px 30px}}
@media (max-width:768px){.renkli-tabs{gap:8px}.renkli-tab{width:120px;height:160px;padding:8px;border-radius:12px}.renkli-tab.active{border-radius:12px 12px 0 0;margin-bottom:-8px;padding-bottom:16px}.renkli-tab.active::before,.renkli-tab.active::after{width:16px;height:16px}.renkli-tab.active::before{left:-16px}.renkli-tab.active::after{right:-16px}.renkli-tab img{height:70px;margin-bottom:8px;border-radius:8px;padding:6px}.renkli-tab h4{font-size:12px;margin-bottom:4px}.renkli-tab p{font-size:10px}.renkli-content{border-radius:20px;min-height:auto;margin-top:8px}.renkli-left{padding:24px}.renkli-badge{padding:8px;gap:8px}.renkli-badge-icon{width:24px;height:24px}.renkli-badge-icon svg{width:12px;height:12px}.renkli-badge span{font-size:14px}.renkli-left h2{font-size:20px;line-height:28px}.renkli-left>p{font-size:14px;line-height:22px}.renkli-right{padding:16px}}

@media (max-width:768px){.package-container{gap:24px;padding:0 16px;}.delivery-stats{order:3;}.delivery-stats p{font-size:18px;line-height:27px;padding:0 16px;}.vip-toggle-wrapper,.package-selector{max-width:100%;}.package-tabs{display:none;}.pkg-tab{font-size:12px;}.package-selector{order:2;}.pkg-grid-wrapper{max-width:100%;background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important;}.pkg-grid-content{padding:0!important;}.pkg-feature-cards{order:1;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:12px;max-width:100%;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 0 0;}.pkg-feature-cards::-webkit-scrollbar{display:none;}.pkg-feature-card{width:155px;height:301px;flex:none;scroll-snap-align:start;}.pkg-feature-card .tab-badge{display:block;}.pkg-feature-checkbox{display:flex;}.pkg-feature-card.active-tab.card-high-quality{box-shadow:inset 0px 0px 0px 2px rgb(255 67 48/1);}.pkg-feature-card.active-tab.card-active{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);box-shadow:inset 0px 0px 0px 2px rgb(41 111 249/1);}.pkg-feature-card.active-tab.card-active .pkg-feature-header{background:transparent;}.pkg-feature-card.active-tab.card-active .pkg-feature-list,.pkg-feature-card.active-tab.card-active .pkg-feature-item,.pkg-feature-card.active-tab.card-active .pkg-feature-item strong,.pkg-feature-card.active-tab.card-active .pkg-feature-link{color:#fff;}.pkg-feature-card.active-tab.card-active .pkg-feature-icon svg path{stroke:#fff;}.pkg-feature-card.active-tab.card-vip{background:linear-gradient(96.8deg,#952eff 0%,#bf81ff 100%);box-shadow:inset 0px 0px 0px 2px rgb(149 46 255/1);}.pkg-feature-card.active-tab.card-vip .pkg-feature-header{background:transparent;}.pkg-feature-card.active-tab.card-vip .pkg-feature-list,.pkg-feature-card.active-tab.card-vip .pkg-feature-item,.pkg-feature-card.active-tab.card-vip .pkg-feature-item strong,.pkg-feature-card.active-tab.card-vip .pkg-feature-link{color:#fff;}.pkg-feature-card.active-tab.card-vip .pkg-feature-icon svg path{stroke:#fff;}}