/* Kaldırındır.com — ana responsive (mobile-first) sistemi
   app.css üzerine biner. Tüm public/*.html sayfaları için mobile-first responsive tasarım.
   Viewport optimizasyonu, örneğin kutusu düzenlemeleri, dokunsal iyileştirmeler, modern CSS özellikleri.
*/

/* ── Viewport iyileştirmesi (ilk nokta) ── */
html{min-height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{min-height:100dvh;font-display:swap;}

/* ── Örnek kutular and grid'ler için temel mobil-first düzelticiler ── */
.wrap{padding-inline:clamp(14px,4vw,22px);}

/* Kart ızgaraları — mobil cihazlarda 1 sütun, sonra 2, sonra 3+, stabil çentik */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(12px,3vw,18px);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(14px,3.5vw,20px);}
.facts,.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(140px,22vw,180px),1fr));gap:clamp(12px,2.5vw,16px);}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,18px);}@media(max-width:540px){.stats{grid-template-columns:repeat(2,1fr);}}

/* Nasıl çalışır adımları */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,22px);}@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}@media(max-width:480px){.steps{grid-template-columns:1fr;}}

/* Arama kutusu üzerine yazıyor (z-index korunmalı) */
.search-wrap{margin-top:clamp(-50px,-8vh,-72px);}@media(max-width:420px){.search-wrap{margin-top:clamp(-40px,-6vh,-52px);}}

/* Modal düzelticiler */
.modal{max-width:min(92vw,640px);}@media(max-width:480px){.modal{max-width:100vw;height:100vh;overflow-y:auto;border-radius:0;margin:0;}}
.modal .modal-bg{align-items:flex-end;padding:0;background:rgba(5,5,7,.6);}@media(min-width:768px){.modal-bg{justify-content:center;align-items:center;}}.modal-bg.open .modal{margin:0;}
.login-modal{max-width:min(94vw,480px);width:min(94vw,480px);}@media(max-width:480px){.login-modal{width:100vw;max-width:100vw;height:100vh;overflow-y:auto;border-radius:0;margin:0;}}

/* Harici içerik için zeplin (iframe, örn. video) */
.iframe-wrap{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:18px 0;}
.iframe-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:var(--r-lg);}

/* Gizlilik/kişisel kullanım için okuma modu iyileştirmeleri */
@media(hover:none) and (pointer:fine){.ic,.btn-icon{cursor:pointer;}}.btn-icon:active{background:var(--line);border-color:var(--gold);color:var(--gold-txt);}
.btn{min-height:44px;padding-block:12px;}.ic{min-height:18px;}

/* Görsel optimizasyon */
img{max-width:100%;height:auto;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;}
.picture-wrap{position:relative;overflow:hidden;border-radius:var(--r-lg);}
.picture-wrap img{aspect-ratio:16/10;object-fit:cover;transition:transform .18s ease,filter .18s ease;}
.picture-wrap:hover img{transform:scale(1.04);filter:brightness(.95);}

/* BLEFA - İnce parmaklı cihazlar için dokunsal iyileştirmeler */
@supports(inset:0){.btn{padding-block:12px;}}.btn-text{word-break:break-word;line-break:strict;}

/* Tablolar mobilde .tbl-wrap içinde yatay kaydırma ile çözülür.
   (Eski "kart" dönüşümü — padding-left:40% + ::before etiketleri — medya sorgusunun
   DIŞINDA kaldığı için tüm ekranlarda hücre metnini sağa itiyordu; kaldırıldı.) */

/* Arama seçicileri mobil cihazlar için düzeltiyor */
@media(max-width:420px){.search{flex-direction:column;gap:12px;}.search .sep{display:none;}.search .go .btn{width:100%;padding-block:14px;}}

/* İletişim / kart liste öğeleri esnekliğini koruyor */
@media(max-width:520px){.contact-item{flex-direction:column;gap:10px;align-items:flex-start;}.contact-item .ic{margin-top:0;}}

/* CTA bandı mobil düzelticisi */
.cta{flex-direction:column;align-items:stretch;gap:18px;padding:clamp(24px,5vw,32px);}.cta .sp{flex:none;margin-top:4px;}.cta h2,.cta p{text-align:center;}.cta .badges{justify-content:center;}

/* Panel / admin düzenleri */
@media(max-width:960px){.fgrid{grid-template-columns:1fr 1fr;gap:28px;} .fbrand{grid-column:1/-1;}}

/* Odyo/günübirimi geçişleri saniyor biraz daha yumuşak */
*{transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .18s ease,filter .18s ease,box-shadow .25s ease;}

/* Özel class'lar her işlem için tekrarlanabilir */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.hidden{display:none !important;}

/* Aşağı yukarı cihazlar için basit görüntü modu */
@media(orientation:portrait){.hero .crane{right:-20%;opacity:.08;}}

/* Tablet portre modu */
@media(min-width:768px) and (max-height:1024px){.hero{padding-block:56px 96px;}.hero h1{font-size:clamp(36px,5vw,56px);}}

/* Yüksek çözünürlüklü cihazlar */
@media(min-resolution:2dppx){img{image-rendering:-webkit-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated;}}

/* Kararsızlıkla çevrili cihazlar için temel zemin */
@media(prefers-reduced-motion:all){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;filter:unset !important;transform:unset !important;}}

/* Swipe-olabilir listeler */
.scrollable-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.scrollable-x::-webkit-scrollbar{height:6px;display:none;}
.scrollable-x::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.scrollable-x::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* (Yinelenen tablo-kart bloğu kaldırıldı — yukarıdaki nota bakın.) */

/* Arama `section` (görüntü/para) - kolay okunabilirlik için */
section.prose{max-height:60vh;overflow-y:auto;padding:16px;background:var(--bg-2);border-radius:var(--r-md);border:1px solid var(--line);margin-block:12px;-webkit-overflow-scrolling:touch;}

/* DRM korumalı içerik değil (dekoratif değil) */
.img-secure{display:inline-block;user-select:none;pointer-events:none;filter:brightness(.95) contrast(1.05);opacity:.9;-webkit-backface-visibility:hidden;backface-visibility:hidden;}

/* Hafıza kullanımını maksimuma çıkaran kompakt tablo */
.compact-tbl{table-layout:fixed;}.compact-tbl th,.compact-tbl td{padding-block:10px;font-size:13.5px;}.compact-tbl .amt{text-align:right;font-variant-numeric:lining-nums;}

/* Mobil cihazlarda daha küçük fontlu girişler */
@media(max-width:380px){input,.inp{font-size:16px;} .btn{font-size:14px;padding-inline:14px;}.ic{width:1.1em;height:1.1em;}}

/* Not: Örnek struct'ları öngörülebilir tutmak için safra grafikleri. */
.graph-bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;}.graph-bar .fill{height:100%;background:var(--gold);border-radius:inherit;transition:width .4s ease;}

/* Yapıcı tipografileri optimize et */
:root{--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Consolas, monospace;}.text-ui{font-family:var(--font-sans);letter-spacing:-.01em;}.text-mono{font-family:var(--font-mono);font-size:13.5px;line-height:1.6;}

/* Touch device'larda hover:none varsa mobil menüye geç (büyük ekranlarda linkleri gizleme) */
@media(hover:none) and (max-width:900px){.nav .links{display:none;}}

/* Görselleştirme (tüm derleme ortamlarında) */
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--r-sm);}

/* Enerji tasarrufu için onun yerine */
@media(hover:none) and (pointer:fine){.ic:hover{filter:none;}.btn:hover{box-shadow:none;}}

/* Geçiş komut adımı (CSS animasyonları yazmaya başlamadan önce hızlı kontrol) */
.anim-fade{animation:fadeIn .3s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Şeyleri kopyalayan markalar (örn. kampanyalarda) */
.selectable{cursor:text;user-select:text;}.to-copy{cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* Otantasyon için basit geri besleme barı */
.progress-bar{height:4px;background:var(--line);overflow:hidden;border-radius:2px;}
.progress-fill{height:100%;background:var(--gold);width:0;transition:width .2s ease;}

/* Tamamen sayfa ekranı modu için */
@media(hover:none) and (pointer:coarse) and (orientation:portrait){.page-hero h1{font-size:clamp(26px,5.6vw,40px);}.page-hero .lead{font-size:clamp(14px,2.8vw,18px);}}

/* Kullanılmamış içerikler için (yaptım = 'none') */
.accordion-item details:not(:hover) summary span{opacity:.4;}

/* Şimdi sütunu karışıklıktan korumak için → mobil önalıntı veriyor */
@container (max-width:400px){.card .body{padding:12px;}.card .title{font-size:15px;}.card .company,.card .price{font-size:13px;}}

/* Tüm disparada (resim birleştirme) için flex sıfırlayıcı - tam kontrol */
.clearfix::after{content:'';display:table;clear:both;}

/* İmzaya dayalı API durumları, benzerlikten korumalı */
.badge{--badge-success:#16a34a;--badge-error:#dc2626;--badge-warning:#ea580c;--badge-info:#0284c7;}.badge-success{background:var(--badge-success);color:#fff;}.badge-error{background:var(--badge-error);color:#fff;}

/* Mobil/destek cihazları için temelyse kullanılabilir gösterim */
@media(max-width:440px){.floating-btn{position:fixed;bottom:16px;right:16px;z-index:50;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.3);}.floating-btn .ic{width:24px;height:24px;}}

/* DOM'a hizalamak için basit otomasyon etkinleştiricisi */
.animations-delayed{animation-delay:.25s;}.jump{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}.jump:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--gold-2);}.jump:active{transform:translateY(0);}

/* Önemli eksik tasarım: Görünüşü en iyi hale getirmek için kenar boşluğu ve border-box düzeltmeleri */
html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}

/* Yazı tipi optimizasyonu */
@font-face{font-family:'Geist Mono';src:local('Courier New'),local('Menlo'),local('Consolas'),monospace;}
.emoji{float:none;display:inline-block;vertical-align:-2px;margin:0 0.15em;min-width:1.2em;text-align:center;}

/* Vurgulu ekranlar için basit ve açıkça; arayüz temel görünüm kutusu */
@media (max-width: 420px) and (orientation: portrait) {
  .nav {
    height: 56px;
    background: var(--chrome);
    padding-inline: 12px;
    border-bottom: 1px solid var(--chrome-line);
  }
  .nav .logo .wm {
    font-size: 20.5px;
  }
  .nav .links {
    gap: 8px;
  }
  .nav .links a {
    font-size: 12.5px;
  }
  .page-hero {
    padding: 40px 0;
    border-radius: 0;
    margin: 0;
  }
  .page-hero .wrap {
    padding: 0;
  }
  .page-hero h1 {
    font-size: clamp(24px, 5vw, 38px);
    line-height: 1.15;
  }
  .page-hero .lead {
    font-size: clamp(14px, 3vw, 18px);
  }
  .wrap {
    padding-inline: 12px;
  }
}

/* Responsive zarar görmeden sonra – örneğin, Page Css (Örn. Sieve ve içerik) temel ekranlaştırma için */
@media (max-width: 460px) and (orientation: portrait) {
  .prose {
    max-width: 100%;
    padding: 20px 0;
  }
  .card {
    border-radius: var(--r-md);
    margin-bottom: 12px;
  }
  .card .thumb {
    border-radius: calc(var(--r-md) - 2px);
  }
  .card .body {
    padding: 12px;
  }
  .card .title {
    font-size: 14.5px;
  }
  .card .company {
    font-size: 12.5px;
  }
  .card .price {
    font-size: 16px;
    padding-top: 8px;
  }
  .facts {
    margin-top: 8px;
    margin-bottom: 20px;
  }
  .fact {
    padding: 16px;
  }
  .fact .n {
    font-size: 20px;
  }
  .step {
    border-radius: var(--r-md);
    padding: 14px;
  }
  .step .no {
    width: 28px;
    height: 28px;
    font-size: 13.5px;
  }
  .step h3 {
    margin: 0;
    font-size: 14.5px;
  }
  .step p {
    font-size: 13.5px;
  }
  .cta {
    margin: 0;
    padding: 16px;
    border-radius: var(--r-md);
    gap: 12px;
  }
  .cta h2 {
    font-size: 20.5px;
  }
  .cta p {
    font-size: 13.5px;
  }
  .callout {
    padding: 14px;
    margin: 0 0 12px;
  }
  .faq summary {
    font-size: 14px;
    padding: 14px;
  }
  .faq .a {
    font-size: 13px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }
  .contact-item .ic {
    margin-top: 0;
  }
  .contact-item b {
    font-size: 14px;
  }
  .contact-item span {
    font-size: 12.5px;
  }
  .rows {
    margin-bottom: 10px;
  }
  .row-item {
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
  }
  .row-item b {
    font-size: 14.5px;
  }
  .row-item .meta {
    font-size: 12px;
  }
  .kpis {
    grid-template-columns: 1fr;
  }
  .kpi {
    padding: 16px;
  }
  .kpi .n {
    font-size: 24px;
  }
  .section-head h2 {
    font-size: 22px;
  }
  .section-head p {
    font-size: 13.5px;
  }
  .badge {
    font-size: 12px;
  }
  .modal .m-actions {
    flex-direction: column;
  }
  .how {
    margin-bottom: 16px;
  }
  .callout {
    margin-bottom: 10px;
  }
  .facts,.kpis {
    margin-bottom: 14px;
  }
  .stat .n {
    font-size: 20px;
  }
  .stat {
    padding: 14px;
  }
  .notes,.callout,.notice {
    margin-bottom: 10px;
  }
  .usage {
    font-size: 13px;
  }
}

/* Very small screens (max-width: 320px) – A8 minimal mühendislik */
@media (max-width: 320px) and (orientation: portrait) {
  .nav .logo .wm {
    font-size: 19.5px;
  }
  .nav {
    gap: 8px;
    height: 52px;
  }
  .nav .links a {
    font-size: 11.5px;
  }
  .page-hero .wrap {
    padding-inline: 8px;
  }
  .wrap {
    padding-inline: 12px;
  }
  .nav {
    padding-inline: 8px;
  }
  .page-hero {
    border-radius: 0;
    margin: 0;
  }
  .page-hero h1 {
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.15;
  }
  .cards {
    gap: 10px;
  }
  .icard {
    padding: 14px;
  }
  .icard .num {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .icard h3 {
    font-size: 14px;
  }
  .icard p {
    font-size: 11.5px;
    line-height: 1.6;
  }
  .prose p {
    font-size: 13px;
  }
  .caption {
    font-size: 10.5px;
  }
  .errors small {
    font-size: 11.5px;
  }
  .tagline {
    align-items: center;
    gap: 8px;
  }
  .tagline span {
    font-size: 12px;
  }
  .tagline .dot {
    width: 4px;
    height: 4px;
  }
  .section-head h2 {
    font-size: 20.5px;
  }
  .faq summary {
    font-size: 13.5px;
  }
  .faq .a {
    font-size: 12.5px;
  }
  .callout {
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .card {
    border-radius: var(--r-sm);
  }
  .card .body {
    padding: 10px;
  }
  .card .title {
    font-size: 13.5px;
  }
  .card .company {
    font-size: 12px;
  }
  .card .price {
    font-size: 14px;
  }
  .btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  .btn-sm {
    padding: 8px 12px;
    font-size: 11.5px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat {
    padding: 12px;
  }
  .stat .n {
    font-size: 18px;
  }
  .stat .l {
    font-size: 11.5px;
  }
  .fact {
    padding: 14px;
  }
  .facts,.kpis {
    gap: 8px;
  }
  .fact .n {
    font-size: 16px;
  }
  .step {
    border-radius: var(--r-md);
    padding: 12px;
  }
  .step .no {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .step h3 {
    font-size: 13.5px;
  }
  .step p {
    font-size: 12.5px;
  }
  .cta {
    padding: 16px;
    gap: 10px;
  }
  .cta h2 {
    font-size: 18.5px;
  }
  .cta p {
    font-size: 12.5px;
  }
  .row-item {
    padding: 12px;
  }
  .row-item b {
    font-size: 13.5px;
  }
  .row-item .meta {
    font-size: 11.5px;
  }
  .kpi {
    padding: 12px;
  }
  .kpi .n {
    font-size: 20px;
  }
  .kpi .l {
    font-size: 11.5px;
  }
  .badge {
    font-size: 11px;
  }
  .panel-tabs {
    gap: 4px;
  }
  .ptab {
    padding: 6px 8px;
    font-size: 11.5px;
  }
  .tbl {
    margin: 0;
    border-radius: var(--r-sm);
  }
  .tbl th,
  .tbl td {
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .modal {
    margin: 0;
    border-radius: 0;
  }
  .modal .m-body {
    padding: 14px;
  }
  .header-toggle {
    display: none;
  }
  .nav .links {
    display: none;
  }
  .modal .m-actions {
    flex-direction: column;
    gap: 6px;
  }
  .search .field select,.search .field input {
    font-size: 14px;
  }
  .search .go .btn {
    padding: 10px 14px;
  }
  .search {
    flex-direction: column;
  }
  .logo .wm {
    font-size: 18px;
  }
  .logo svg {
    width: 28px;
    height: 28px;
  }
  .ic {
    width: 1em;
    height: 1em;
  }
  .cta .sp {
    flex: none;
    margin: 0;
  }
  .content-sidebar {
    display: none;
  }
  .form-field {
    margin-bottom: 10px;
  }
  .form-label {
    padding: 8px 0;
  }
  .search-toggle {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    z-index: 50;
  }
  .nav-extended {
    display: none;
  }
  .page-hero {
    border-radius: 0;
    margin: 0;
  }
  .step,.card,.icard {
    border-radius: var(--r-sm);
  }
  .app {
    border-radius: 0;
    margin: 0;
  }
}

/* Tasarruf: Bu responsive.css dosyası, tüm public/*.html sayfalarına
   app.css'ü takviye eder ve mobil cihazlarda sorunsuz, uygun çalışır.
   Geliştirme sırasında her sayfayı tek bir yerden düzenleyebilirsiniz (örneğin page.css).
*/