/* ============================================================================
   Ahıska Miras — DUYARLI (responsive) KATMAN
   11 Eylül 2026 · YENİ DOSYA. Tasarımın kendi CSS'ine dokunmaz; yalnızca
   kırılım noktalarında (breakpoint) düzeltme/iyileştirme yapar. Sonda yüklendiği
   için aynı seçicilikteki kuralları geçersiz kılar.
   Kırılımlar: telefon ≤640 · küçük telefon ≤400 · yatay telefon (max-height 480)
               tablet 641–1100 · masaüstü ≥1101 (tasarımın kendisi)
   ============================================================================ */

/* ---------------------------------------------- A. temel güvenlik ve taşma */
html,body{max-width:100%;overflow-x:hidden}
img,video,audio,canvas,svg{max-width:100%}
img,audio{height:auto}
p,li,h1,h2,h3,h4,td,th{overflow-wrap:break-word;word-wrap:break-word}
.page{scroll-margin-top:90px}
::selection{background:#c9a22755}

/* ------------------------------------------------- dokunmada davranış */
a,button,.btn,.tag,.word{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{transition:background .2s,transform .2s,box-shadow .2s}

/* --------------------------------------------- B. tablet yatay 641–1100 */
@media(min-width:641px) and (max-width:1100px){
  .container{padding:46px 22px}
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .stats{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-top:-32px}
  .stat{padding:20px 14px}
  .stat b{font-size:26px}
  #map{height:520px}
  .map-panel{max-height:none}
  .hero{padding:60px 20px 70px}
  .section-title{font-size:25px}
}

/* ------------------------------------------------ C. ≤900: üst menü */
@media(max-width:900px){
  .nav-wrap{padding:8px 14px;gap:8px;flex-wrap:wrap}
  .logo{font-size:15px;gap:9px}
  .logo-mark{width:34px;height:48px}
  .logo small{font-size:9px;letter-spacing:.2px}
  .user-bar{font-size:12px;margin-left:auto}
  .user-bar .user-avatar{width:30px;height:30px;font-size:12px}
  .menu-btn{font-size:26px;padding:4px 8px;line-height:1}
  nav ul{max-height:calc(100vh - 68px);overflow-y:auto;box-shadow:0 14px 26px rgba(0,0,0,.4);border-top:2px solid var(--altin);padding:8px 10px 12px;-webkit-overflow-scrolling:touch}
  nav ul li{width:100%}
  nav a{display:block;padding:12px 14px;font-size:14px;border-radius:8px;border-bottom:1px solid #ffffff12}
  .hero{background-attachment:scroll}
  .stats{margin-top:-26px}
}

/* ----------------------------------------------------- D. ≤768: tablet dikey */
@media(max-width:768px){
  .container{padding:34px 16px}
  .hero{padding:46px 16px 56px}
  .hero h1{font-size:clamp(23px,7.2vw,32px)}
  .hero p{font-size:15px;margin-bottom:22px}
  .hero .yil{font-size:11.5px;padding:5px 14px;letter-spacing:1.4px}
  .hero-logo{width:clamp(132px,42vw,180px);height:auto;margin-bottom:18px}
  .section-title{font-size:clamp(20px,5.4vw,24px);gap:9px}
  .section-title::before{width:5px;height:22px}
  .section-sub{font-size:14px;margin-bottom:22px}
  .intro-1944{padding:44px 16px}
  .intro-1944 h1{font-size:clamp(22px,6.4vw,30px)}
  .intro-1944 p{font-size:15px}
  .intro-1944 .sayi{font-size:19px}
  .quote-box{padding:20px 20px;font-size:14.5px}
  .quote-box::before{font-size:38px;vertical-align:-10px}
  .card h3{font-size:16.5px}
  .timeline{margin:26px auto}
  .map-layout{grid-template-columns:1fr}
  #map{height:440px}
  .map-panel{max-height:none}
}

/* --------------------------------------------------------------- E. ≤640: telefon */
@media(max-width:640px){
  .container{padding:28px 14px}
  .stats{margin-top:0;grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:16px 12px}
  .stat b{font-size:23px}
  .stat span{font-size:10.5px;letter-spacing:.4px}
  .grid,.word-grid{gap:14px}
  .grid-2,.grid-3,.word-grid{grid-template-columns:1fr}
  .card-body{padding:17px}
  .card:hover{transform:none}
  .card,.katki-item,.sesli-card,.relative-card{box-shadow:0 3px 14px rgba(107,29,29,.08)}
  .tl-item{padding:14px 6px 14px 44px}
  .tl-yil{font-size:19px}
  .tl-metin{font-size:13px}
  .tl-baslik{font-size:14.5px}
  #map{height:380px}
  .map-legend{font-size:11.5px;line-height:1.9}
  .form-card{padding:20px 15px}
  .form-row{gap:12px}
  .profile-header{padding:18px;gap:14px}
  .profile-avatar{width:62px;height:62px;font-size:23px}
  .profile-header h2{font-size:19px}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar input,.toolbar select,.toolbar-row select,.toolbar-row input{min-width:0;width:100%}
  .toolbar .btn,.toolbar-row .btn{width:100%;justify-content:center}
  .toolbar-row .sep{display:none}
  .tab-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tab-bar::-webkit-scrollbar{display:none}
  .tab-bar button{white-space:nowrap;padding:11px 13px;font-size:12.5px}
  .katki-header{flex-direction:column}
  .katki-actions{width:100%}
  .katki-actions button{flex:1}
  .relative-card{flex-wrap:wrap;padding:14px;gap:10px}
  .relative-avatar{width:44px;height:44px;font-size:15px}
  .match-score{min-width:44px;font-size:19px}
  .sesli-header{gap:10px}
  .sesli-avatar{width:48px;height:48px;font-size:18px}
  .sesli-card{padding:15px}
  .topic{padding:12px;gap:10px}
  .topic-meta{font-size:10.5px}
  .hero .btn{display:flex;width:100%;margin:0 0 10px;justify-content:center;padding:13px 18px}
  .hero .btn-outline{margin-left:0}
  input,select,textarea{font-size:16px}          /* iOS otomatik yakınlaştırmayı keser */
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  footer{padding:36px 16px 20px;margin-top:44px}
  .foot-logo{width:70px;height:102px;margin-bottom:10px}
  .foot-grid h4{font-size:13.5px}
  .foot-grid a{font-size:13px;padding:5px 0}
  .copy{font-size:11.5px;margin-top:22px}
  .modal{padding:22px 16px;border-radius:12px}
  .modal h2{font-size:18px}
  .modal .close{font-size:24px;top:10px;right:12px}
  .loading{left:14px;right:14px;transform:none;top:auto;bottom:18px;text-align:center}
}

/* ------------------------------------------------- F. ≤400: küçük telefon */
@media(max-width:400px){
  .logo small{display:none}
  .hero h1{font-size:21.5px}
  .hero-logo{width:118px}
  .hero p{font-size:14.5px}
  .stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .section-title{font-size:19.5px}
  .container{padding:24px 12px}
  .sesli-avatar{width:42px;height:42px;font-size:16px}
}

/* ------------------------------------------- G. yatay telefon (kısa ekran) */
@media(max-height:480px) and (orientation:landscape){
  .hero{padding:26px 16px 32px}
  .hero-logo{width:96px;margin-bottom:12px}
  .hero h1{font-size:22px}
  nav ul{max-height:72vh}
}

/* ------------------------------------------------- H. hareket azaltma tercihi */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .hero{background-attachment:scroll}
}