/* =====================================================================
   MATSEV YAYINCILIK — Genel Responsive & UX Düzeltmeleri
   ---------------------------------------------------------------------
   Bu dosya diğer TÜM stil dosyalarından SONRA yüklenmelidir; eski
   sayfalardaki sabit piksel ölçüleri buradan güvenle geçersiz kılınır.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TEMEL SIFIRLAMA
   Sitede hiç reset yoktu: body'nin tarayıcı varsayılanı olan 8px dış
   boşluğu yüzünden tam genişlik olması gereken bölümler (footer, bant,
   hero) kenarlara yapışamıyor, logo ve kartlar kırpılmış görünüyordu.
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Uzun kelimeler / linkler dar ekranda taşmasın */
p,
li,
h1,
h2,
h3,
h4,
a {
  overflow-wrap: break-word;
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kıs */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------
   2. ERİŞİLEBİLİRLİK / UX
   Klavye ile gezinenler için görünür odak halkası (sitede hiç yoktu).
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #A21E7E;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sabit başlık yokken bile çapa (#id) hedefleri ekranın tepesine yapışmasın */
[id] {
  scroll-margin-top: 24px;
}

/* ---------------------------------------------------------------------
   3. HEADER / MOBİL MENÜ
   .hamburger'ın temel (masaüstü) durumu hiç tanımlanmamıştı; menü
   ikonu geniş ekranlarda da görünüyordu.
   --------------------------------------------------------------------- */
.hamburger {
  display: none;
}

/* 769–1280px: menü + iki buton tek satıra sığmıyor, sağ kenardan
   taşıyordu. Sıkışık ölçüler bu aralığa da uygulandı. */
@media screen and (min-width: 769px) and (max-width: 1280px) {
  .header-container {
    gap: 16px;
  }

  .menu-container {
    gap: 16px;
    min-width: 0;
  }

  .nav-links ul {
    gap: 16px;
    flex-wrap: wrap;
  }

  .nav-links ul li a,
  .nav-links ul li a.active {
    font-size: 13px;
  }

  .header-button {
    flex-shrink: 0;
  }

  .header-button a {
    font-size: 12px;
    padding: 9px 12px;
  }

  .logo {
    flex-shrink: 0;
    scale: 0.85;
  }
}

@media screen and (max-width: 768px) {
  .hamburger {
    display: flex;
    /* Parmakla rahat basılabilir hedef alanı */
    padding: 10px;
    margin: -10px;
    justify-content: center;
  }

  .header-container {
    width: 100%;
    margin-top: 24px;
    padding: 0 16px;
  }

  .header-line {
    width: 100%;
    margin-top: 16px;
  }

  /* Menü açıkken bağlantılar rahat basılabilsin */
  .menu-container .nav-links ul li a {
    display: block;
    padding: 10px 16px;
    font-size: 16px;
  }

  .header-button {
    margin-top: 8px;
  }

  .header-button a {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------
   4. FOOTER
   .footer-container'ın sabit 344px yüksekliği vardı. Mobilde bloklar
   alt alta dizilince içerik bu yüksekliği aşıyor, sarı zemin içeriğin
   ortasında aniden kesiliyordu. Yükseklik artık içeriğe göre büyüyor,
   sarı arka plan (preserveAspectRatio="none" olan düz dikdörtgen SVG)
   footer'ın tamamını kaplıyor.
   --------------------------------------------------------------------- */
.footer {
  height: auto;
}

.footer-container {
  height: auto;
  min-height: 344px;
  padding-bottom: 32px;
}

.footer-bg {
  display: block;
  height: 100%;
}

@media (max-width: 992px) {
  .footer-container {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0 20px 32px;
  }

  .footer-inner,
  .footer-line,
  .footer-bottom-content {
    width: 100%;
  }

  .footer-inner {
    gap: 32px;
    padding-top: 32px;
  }
}

@media (max-width: 768px) {
  /* Logonun kenarlardan kırpılmasını önle */
  .footer-logo {
    flex-shrink: 0;
    background-size: contain;
  }

  .footer-block-list li {
    margin-bottom: 4px;
  }

  /* Parmakla basılabilir link hedefleri (en az 44px) */
  .footer-block-list li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-left-text,
  .footer-right-text {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   5. KİTAP KARTLARI
   Kartlar her ekranda sabit 293px'ti; dar ekranda kenarlara yapışıyordu.
   --------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .coksatanlar-cards {
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .coksatanlar-container {
    margin-bottom: 56px;
    padding: 0 16px;
  }

  .coksatanlar-cards {
    gap: 16px;
  }

  .coksatanlar-card {
    width: 100%;
    max-width: 320px;
  }

  .card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 293 / 275.206;
  }

  .book-png {
    width: 100%;
    height: 100%;
    left: 50%;
  }

  .book-png img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .card-title {
    width: auto;
    margin-left: 16px;
    padding-right: 16px;
    font-size: 18px;
  }

  .card-subtitle,
  .card-rating {
    margin-left: 16px;
  }
}

/* Çok dar ekranlarda kartlar tam genişlik */
@media (max-width: 400px) {
  .coksatanlar-card {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------
   6. "ÖRNEK KİTAP FORMU" BÖLÜMÜ
   Mobilde .content-box'a display:none verilmişti; başlık, açıklama ve
   forma giden bağlantı telefonda hiç görünmüyordu. Artık mobil görselin
   üzerinde okunur bir katman olarak duruyor.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .main-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 16px;
  }

  .background-box {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 300px;
    border-radius: 20px;
    background: #A21E7E url("images/mobileogretmen.png") center / cover no-repeat;
  }

  .content-box {
    display: flex;
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    left: 16px;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 20px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(to top, rgba(162, 30, 126, 0.94) 42%, rgba(162, 30, 126, 0) 100%);
  }

  .book-image-1,
  .book-image-2,
  .book-image-3,
  .circle-wrapper,
  .brand-logo {
    display: none;
  }

  .main-container .title {
    position: static;
    width: auto;
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 32px;
    text-align: left;
  }

  .main-container .description {
    position: static;
    width: auto;
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    text-align: left;
  }

  .main-container .description a {
    text-decoration: underline;
  }
}

/* Tablet ve ara genişlikler (641px–1280px): bölüm 1150px/920px'e
   sabitlenmişti ve ekrandan taşıyordu. Kutular akışkan yapıldı,
   dekoratif kitap görselleri sağ kenara sabitlendi. */
@media (min-width: 641px) and (max-width: 1280px) {
  .main-container {
    width: 100%;
    max-width: 1150px;
    padding: 0 16px;
  }

  .background-box,
  .content-box {
    width: 100%;
  }

  .book-image-1 {
    left: auto;
    right: 26%;
  }

  .book-image-2 {
    left: auto;
    right: 8%;
  }

  .book-image-3 {
    display: none;
  }

  .circle-wrapper {
    left: auto;
    right: -8%;
  }

  .brand-logo {
    left: auto;
    right: 32px;
  }
}

/* 641–1024px arasında metin bloğuna daha fazla yer aç.
   (Başlığa 1150px sabit genişlik verilmişti; ayrıca başlık ile açıklama
   üst üste biniyordu — konumlar mor kutuya ortalanacak şekilde yeniden
   hesaplandı.) */
@media (min-width: 641px) and (max-width: 1024px) {
  .main-container .title {
    top: 196px;
    right: 42%;
    bottom: auto;
    width: auto;
    font-size: 40px;
    line-height: 44px;
  }

  .main-container .description {
    top: 301px; /* 196 + (2 x 44) + 17 */
    width: 52%;
    margin-top: 0;
    font-size: 22px;
    line-height: 27px;
  }
}

/* "Bizimle çalışmak ister misiniz?" bölümü 1250px'e sabitti */
@media (max-width: 1280px) {
  .bizimle {
    width: 100%;
    max-width: 1250px;
    padding: 0 16px;
    margin-bottom: 72px;
  }
}

/* Akıllı Tahta + Bayilerimiz kutuları — 1150px'e sabitti, taşıyordu */
@media (max-width: 1280px) {
  .main-container2 {
    width: 100%;
    max-width: 1250px;
    padding: 0 16px;
  }

  .main-container2 .left-extra-box,
  .main-container2 .purple-box {
    width: auto;
    flex: 1 1 320px;
    min-width: 0;
  }
}

@media (max-width: 1020px) {
  .main-container2 {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .main-container2 .left-extra-box,
  .main-container2 .purple-box {
    width: 100%;
    max-width: 640px;
    flex: 0 1 auto;
  }
}

/* ---------------------------------------------------------------------
   6b. SABİT 416px MOBİL GENİŞLİKLERİ
   Mobil tasarım 416px genişliğinde bir telefona göre sabitlenmişti;
   375px (iPhone SE/13 mini) ve 360px (çoğu Android) ekranlarda bölümler
   ekrandan taşıyordu. Hepsi akışkan hale getirildi.
   --------------------------------------------------------------------- */
@media (max-width: 520px) {
  .main-container,
  .main-container2,
  .background-box,
  .left-extra-box,
  .purple-box,
  .bizimle,
  .bizimle__img,
  .photo-slider,
  .photo-container,
  .photo {
    width: 100%;
    max-width: 416px;
    margin-left: auto;
    margin-right: auto;
  }

  .bizimle {
    height: auto;
    aspect-ratio: 416 / 220;
  }

  .bizimle__img {
    height: 100%;
    object-fit: cover;
  }

  .photo-slider,
  .photo-container,
  .photo {
    max-width: 100%;
  }
}

/* Macbook görseli 360px'e sabitti; 360px'lik telefonlarda kenardan
   taşıyordu. Ekran genişliğine göre akışkan yapıldı. */
@media (max-width: 480px) {
  .mac-macbook-photo {
    width: min(360px, calc(100vw - 24px));
    height: auto;
    aspect-ratio: 360 / 250;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .mac-video-container {
    width: min(320px, calc(100vw - 64px));
    height: auto;
    aspect-ratio: 320 / 220;
  }
}

/* Slider okları dar ekranda kutunun dışına taşıp kenardan kesiliyordu;
   içeri alındı ve dokunma hedefi korundu. */
@media (max-width: 768px) {
  .hizmetler-arrows .left {
    left: 8px;
  }

  .hizmetler-arrows .right {
    right: 8px;
  }

  .hizmetler-arrows button {
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

/* ---------------------------------------------------------------------
   7. BAYİLER SAYFASI
   Harita mobilde 180px'e kadar iniyor, iller parmakla seçilemiyordu.
   Seçim kutuları da dar ve kısaydı.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .svg-turkiye-haritasi {
    padding: 0 12px;
  }
}

@media (max-width: 767px) {
  /* Harita yatay kaydırılabilir olsun ki iller tıklanabilir kalsın */
  .svg-turkiye-haritasi {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .svg-turkiye-haritasi svg {
    min-width: 560px;
  }

  .dealer-search .search-form {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .dealer-search .form-group {
    width: 100%;
  }

  .dealer-search select {
    width: 100%;
    min-height: 48px; /* parmakla basılabilir */
    font-size: 16px;  /* iOS'ta odaklanınca sayfayı yakınlaştırmaz */
  }
}

/* Bayi sonuç alanı: harita ve arama aynı yere yazar */
.dealer-results:empty {
  display: none;
}

.dealer-results {
  scroll-margin-top: 16px;
}

/* ---------------------------------------------------------------------
   8. KISAYOL KUTULARI (Eğitim Paneli / Örnek Kitaplar / Yardım)
   --------------------------------------------------------------------- */
/* 1021–1240px: üç kutu yan yana sığmıyordu (3 x 400px + boşluklar),
   kenarlardan taşıyorlardı. Esnek genişliğe alındı. */
@media (min-width: 1021px) and (max-width: 1240px) {
  .kisayol-container {
    padding: 0 16px;
  }

  .kisayol-box-container {
    flex-wrap: wrap;
  }

  .kisayol-box {
    width: auto;
    flex: 1 1 280px;
    max-width: 400px;
    height: auto;
    padding-bottom: 32px;
  }

  .kisayol-image1,
  .kisayol-image2,
  .kisayol-image3 {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 320;
    background-size: contain;
  }
}

@media (max-width: 1020px) {
  .kisayol-container {
    margin-bottom: 72px;
    padding: 0 16px;
  }

  .kisayol-box {
    width: 100%;
    max-width: 450px;
    height: auto;
    padding-bottom: 32px;
  }

  .kisayol-image1,
  .kisayol-image2,
  .kisayol-image3 {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 320;
    background-size: contain;
  }

  .kisayol-box-text,
  .kisayol-box-text1 {
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {
  .kisayol-title {
    font-size: 20px;
    line-height: 26px;
  }

  .kisayol-sub-title {
    font-size: 32px;
    line-height: 38px;
  }

  .kisayol-description {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 40px;
    padding: 0 4px;
  }
}

/* ---------------------------------------------------------------------
   9. SAYFA BAŞLIK BLOKLARI (Dijital Kitap, Bayilerimiz vb.)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .warning-text-bayi {
    padding: 0 16px;
  }

  .warning-text-bayi .header2 {
    font-size: 34px;
    line-height: 40px;
  }

  .warning-text-bayi .text {
    font-size: 16px;
    line-height: 25px;
  }
}

/* ---------------------------------------------------------------------
   10. ÜRÜN DETAY / İÇERİK SAYFALARI
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .product-container,
  .alturundetay {
    padding-left: 16px;
    padding-right: 16px;
  }

  .navigation-tabs-container,
  .tabs-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Sekmeler dar ekranda taşarsa yatayda kaydırılsın */
  .tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs-container::-webkit-scrollbar {
    display: none;
  }

  .tabs-container .tab {
    flex-shrink: 0;
    min-height: 44px;
  }
}

/* Flipbook modalı mobilde ekrana sığsın */
@media (max-width: 900px) {
  .modal-content {
    width: 94%;
    max-width: 94%;
    padding: 12px;
  }

  .modal-content .fp-iframe,
  .fp-iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 901px) {
  .fp-iframe {
    aspect-ratio: 4 / 3;
    height: auto !important;
  }
}

/* ---------------------------------------------------------------------
   10b. İLETİŞİM SAYFASI
   contact.css'te hiç medya sorgusu yoktu: 1250px'lik sabit iki sütunlu
   düzen küçük ekranlarda taşıyordu.
   --------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .contact-container {
    width: 100%;
    max-width: 1250px;
    padding: 0 16px;
  }
}

@media (max-width: 1024px) {
  .contact-container {
    flex-direction: column;
    border-radius: 0;
  }

  .contact-left,
  .contact-right {
    width: 100%;
    max-width: 640px;
    height: auto;
  }

  .contact-left {
    padding: 32px 24px 40px;
    border-radius: 24px 24px 0 0;
  }

  .contact-right {
    height: 380px;
    border-radius: 0 0 24px 24px;
  }

  .contact-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Dekoratif daireler mobilde taşıyordu */
  .contact-circle-1,
  .contact-circle-2 {
    display: none;
  }

  .contact-info {
    margin-top: 40px;
  }

  .contact-mail,
  .contact-address {
    margin-top: 28px;
  }
}

@media (max-width: 1024px) {
  /* Metinler sabit genişlikteydi (356px/327px) ve flex-shrink:0 ile
     küçülemiyordu; dar ekranda kutudan taşıyorlardı. */
  .contact-info .contact-text,
  .contact-mail .contact-text,
  .contact-address .contact-text {
    width: auto;
    height: auto;
    flex-shrink: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Sosyal ikonlar absolute konumdaydı, yığılan düzende kayıyordu */
  .contact-social-icons {
    position: static;
    margin-top: 40px;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .contact-title {
    width: auto;
    font-size: 44px;
    line-height: 46px;
  }

  .contact-text {
    font-size: 15px;
  }

  /* Sosyal ikonlar parmakla basılabilir olsun */
  .contact-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
   11. WHATSAPP BUTONU
   Mobilde alt köşede içeriğin üstünü kapatmasın diye biraz küçültülür.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .whatsapp-button {
    width: 52px;
    height: 52px;
  }

  .whatsapp-card {
    max-width: calc(100vw - 32px);
  }
}

/* ---------------------------------------------------------------------
   11b. BAŞLIK ETİKETLERİ (SEO)
   Sayfa başlıkları arama motorları için <div> yerine <h1>/<h2> oldu.
   Tarayıcının başlık etiketlerine eklediği varsayılan dış boşluklar
   sıfırlanarak görünüm birebir korunuyor.
   --------------------------------------------------------------------- */
h1.header2,
h1.kitap-baslik,
h1.kisayol-sub-title,
p.kisayol-title,
h2.sss-title,
h2.gizlilik-title,
h2.contract-title,
h2.kvkk-title,
h2.contact-title,
h2.left-extra-box__heading {
  margin-top: 0;
}

h1.header2 {
  margin-bottom: 20px;
}

h1.kitap-baslik {
  margin-bottom: 0;
}

p.kisayol-title {
  margin-bottom: 28px;
}

h1.kisayol-sub-title {
  margin-bottom: 19.59px;
}

h2.left-extra-box__heading {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   12. TABLOLAR — dar ekranda yatay kaydırma
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}