/* ============================================================
   BursaBul — Modern Firma Rehberi & İlan Portalı
   Marka (logodan): Kırmızı #E31E24 | Lacivert #2B2A35 | Amber #F7B500
   ============================================================ */

:root {
    --red: #e31e24;
    --red-600: #c9161c;
    --red-soft: #fdeaea;
    --navy: #2b2a35;
    --navy-800: #383745;
    --navy-600: #4a4858;
    --amber: #f7b500;
    --amber-600: #dfa200;
    --amber-soft: #fff5da;
    --green: #16a34a;
    --bg: #f5f6f8;
    --card: #ffffff;
    --border: #e6e9ee;
    --text: #4b5462;
    --text-light: #838d9a;
    --heading: #1f1e28;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 3px rgba(31, 30, 40, .06), 0 6px 24px rgba(31, 30, 40, .05);
    --shadow-lg: 0 8px 30px rgba(31, 30, 40, .13);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Inter-yedek', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { color: var(--heading); line-height: 1.3; font-weight: 700; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------------- Butonlar ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    transition: all .2s;
    white-space: nowrap;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-600); box-shadow: 0 6px 16px rgba(227, 30, 36, .3); }
.btn-amber { background: var(--amber); color: var(--navy); }
.btn-amber:hover { background: var(--amber-600); box-shadow: 0 6px 16px rgba(247, 181, 0, .35); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-600); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 15px 30px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------------- Üst Bar ---------------- */
.topbar { background: var(--navy); color: #a8a6b6; font-size: 12.5px; }
.topbar .container {
    display: flex; justify-content: space-between; align-items: center; min-height: 38px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--amber); }
.topbar i { font-size: 11px; }
.topbar-social { display: flex; gap: 12px; }

/* ---------------- Header ---------------- */
.header {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header .container { display: flex; align-items: center; gap: 28px; min-height: 88px; }

.logo { display: block; flex-shrink: 0; }
.logo img { height: 48px; width: auto; }

.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a {
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    border-radius: 999px;
    transition: all .15s;
}
.nav a:hover { color: var(--heading); background: var(--bg); }
.nav a.active { color: var(--red); background: var(--red-soft); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .login-link { font-size: 14px; font-weight: 600; color: var(--text); padding: 9px 12px; }
.header-actions .login-link:hover { color: var(--heading); }

.nav-toggle { display: none; background: none; border: none; font-size: 22px; color: var(--navy); margin-left: auto; }

/* ---------------- Hero ---------------- */
.hero {
    position: relative;
    background:
        radial-gradient(900px 400px at 85% -10%, rgba(227, 30, 36, .28), transparent 62%),
        radial-gradient(700px 400px at 8% 110%, rgba(247, 181, 0, .16), transparent 55%),
        linear-gradient(150deg, #383745 0%, #2b2a35 60%, #1f1e28 100%);
    color: #fff;
    padding: 70px 0 110px;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    z-index: 2;
}
.hero .container { position: relative; z-index: 3; }

/* Hero arka plan slider — Bursa görselleri, çok düşük opaklıkta */
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-bg .hb-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* Arka plan görselleri sabit durur. Daha önce burada sürekli dönen bir
       geçiş animasyonu vardı; sayfa açıkken sürekli kıpırdadığı için kaldırıldı. */
}

/* Tek bir arka plan görseli sabit durur */
.hero-bg .hb-slide:first-child { opacity: .22; }

/* Görsellerin üzerine okunabilirlik katmanı */
.hero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(31,30,40,.86) 0%, rgba(31,30,40,.6) 55%, rgba(31,30,40,.75) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg .hb-slide { animation: none; }
    .hero-bg .hb-slide:nth-child(1) { opacity: .22; }
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: #ffd75e;
    font-size: 13px; font-weight: 600;
    padding: 7px 16px; border-radius: 999px;
    margin-bottom: 22px;
}
.hero h1 { color: #fff; font-size: 42px; font-weight: 800; letter-spacing: -1px; max-width: 660px; }
.hero h1 .hl { color: #ff5a5f; }
.hero p.sub { margin: 14px 0 34px; font-size: 17px; color: #b9b7c6; max-width: 570px; }

/* Hero sekmeleri (Firma / İlan) */
.hero-tabs { display: flex; gap: 6px; margin-bottom: -1px; position: relative; z-index: 2; }
.hero-tabs button {
    background: rgba(255,255,255,.08);
    border: none;
    color: #cfcddb;
    font-size: 14px; font-weight: 600;
    padding: 11px 22px;
    border-radius: 12px 12px 0 0;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .15s;
}
.hero-tabs button:hover { background: rgba(255,255,255,.14); color: #fff; }
.hero-tabs button.active { background: #fff; color: var(--red); }

.hero-search {
    display: flex; align-items: stretch;
    background: #fff;
    border-radius: 0 18px 18px 18px;
    padding: 8px; gap: 6px;
    max-width: 880px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
}
.hero-search .hs-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--text-light); }
.hero-search .hs-field + .hs-field { border-left: 1px solid var(--border); flex: 0 0 235px; }
.hero-search .hs-field i { color: var(--red); font-size: 15px; }
.hero-search input, .hero-search select {
    flex: 1; border: none; outline: none;
    font-size: 14.5px; color: var(--heading);
    background: transparent; padding: 14px 0;
}
.hero-search select { appearance: none; cursor: pointer; }
.hero-search .btn { border-radius: 12px; padding: 0 28px; font-size: 14.5px; }

.hero-quick {
    display: flex; align-items: center; gap: 8px;
    margin-top: 18px; font-size: 13px; color: #918fa2; flex-wrap: wrap;
}
.hero-quick a {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #dad8e4;
    padding: 5px 14px; border-radius: 999px;
    font-weight: 500; transition: all .15s;
}
.hero-quick a:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Hero istatistikleri */
.hero-stats { margin-top: -52px; position: relative; z-index: 5; }
.hero-stats .stats-card {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat { display: flex; align-items: center; gap: 14px; padding: 24px 28px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; }
.stat .stat-icon {
    width: 48px; height: 48px; border-radius: 13px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0;
}
.stat .stat-num { font-size: 22px; font-weight: 800; color: var(--heading); line-height: 1.1; }
.stat .stat-label { font-size: 12.5px; color: var(--text-light); }

/* ---------------- Bölüm Başlıkları ---------------- */
.section { padding: 62px 0 22px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-head .kicker {
    font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.section-head h2 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.section-head .see-all {
    font-size: 14px; font-weight: 600; color: var(--navy);
    display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px;
}
.section-head .see-all:hover { color: var(--red); }

/* ---------------- Kategori Kartları ---------------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; display: flex; align-items: center; gap: 14px; transition: all .2s;
}
.cat-card:hover { border-color: var(--red); box-shadow: var(--shadow-lg); }
.cat-card .cc-icon {
    width: 50px; height: 50px; border-radius: 14px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0; transition: all .2s;
}
.cat-card:hover .cc-icon { background: var(--red); color: #fff; }
.cat-card .cc-name { font-weight: 700; color: var(--heading); font-size: 15px; }
.cat-card .cc-count { font-size: 12.5px; color: var(--text-light); }

/* ---------------- Firma Kartları ---------------- */
.firm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.firm-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; transition: all .2s; display: flex; flex-direction: column;
}
.firm-card:hover { box-shadow: var(--shadow-lg); }
.firm-card .fc-cover {
    height: 150px;
    background: linear-gradient(135deg, #43414f, #2b2a35);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.25); font-size: 34px;
}
.firm-card .fc-cover .fc-badge {
    position: absolute; top: 12px; left: 12px;
    background: rgba(22, 163, 74, .95); color: #fff;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
}
.firm-card .fc-cover .fc-cat {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(255, 255, 255, .93); color: var(--navy);
    font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
}
.firm-card .fc-logo {
    width: 58px; height: 58px; border-radius: 14px;
    background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-light); font-size: 20px;
    margin: -29px 0 0 20px; position: relative;
}
.firm-card .fc-body { padding: 12px 20px 18px; flex: 1; }
.firm-card .fc-name { font-size: 16.5px; font-weight: 700; color: var(--heading); }
.firm-card .fc-name:hover { color: var(--red); }
.firm-card .fc-loc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); margin-top: 4px; }
.firm-card .fc-loc i { color: var(--red); font-size: 12px; }
.firm-card .fc-rating { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.firm-card .fc-rating .stars { color: var(--amber); font-size: 12px; letter-spacing: 1px; }
.firm-card .fc-rating .score { font-weight: 700; color: var(--heading); }
.firm-card .fc-rating .cnt { color: var(--text-light); font-size: 12.5px; }
.firm-card .fc-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); padding: 12px 20px;
    font-size: 13px; color: var(--text-light);
}
.firm-card .fc-foot .views { display: flex; align-items: center; gap: 6px; }
.firm-card .fc-foot .detail-link { font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; }
.firm-card .fc-foot .detail-link:hover { color: var(--red); }

/* ============================================================
   İLANLAR — gazete tarzı seri ilanlar
   ============================================================ */

/* Kategori sekmeleri */
/* Sekmeler her zaman tek satırda kalır: sarmalanınca ikinci satır
   yarım görünüyordu. 8 sekmeli ilan listesi 1200 px'lik kapsayıcıya
   sığacak ölçüde dar tutulur; sığmadığı dar ekranlarda yatay kayar. */
.tabs {
    display: flex; gap: 2px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    padding: 11px 12px;
    white-space: nowrap; flex-shrink: 0;
    font-size: 14px; font-weight: 600;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: inline-flex; align-items: center; gap: 7px;
}
.tabs a:hover { color: var(--heading); }
.tabs a.active { color: var(--red); border-bottom-color: var(--red); }
.tabs a .t-cnt {
    background: var(--bg); color: var(--text-light);
    font-size: 11.5px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px;
}
.tabs a.active .t-cnt { background: var(--red-soft); color: var(--red); }

/* Görünüm değiştirici */
.view-switch { display: flex; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.view-switch button {
    border: none; background: transparent;
    padding: 7px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--text-light);
    display: inline-flex; align-items: center; gap: 6px;
}
.view-switch button.active { background: var(--navy); color: #fff; }

/* İlan kartı (modern görünüm) */
.ad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ad-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; transition: all .2s; display: flex; flex-direction: column;
}
.ad-card:hover { box-shadow: var(--shadow-lg); }
.ad-card .ac-thumb {
    height: 160px; position: relative;
    background: linear-gradient(135deg, #e9ebef, #dcdfe5);
    display: flex; align-items: center; justify-content: center;
    color: #b3bac4; font-size: 28px;
}
.ad-card .ac-type {
    position: absolute; top: 10px; left: 10px;
    background: var(--navy); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    padding: 4px 11px; border-radius: 999px; text-transform: uppercase;
}
.ad-card .ac-type.is-job { background: var(--red); }
.ad-card .ac-type.is-sale { background: var(--green); }
.ad-card .ac-type.is-rent { background: #2563eb; }
.ad-card .ac-urgent {
    position: absolute; top: 10px; right: 10px;
    background: var(--amber); color: var(--navy);
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
}
.ad-card .ac-body { padding: 16px 18px; flex: 1; }
.ad-card .ac-title { font-size: 15.5px; font-weight: 700; color: var(--heading); line-height: 1.4; }
.ad-card .ac-title:hover { color: var(--red); }
.ad-card .ac-desc { font-size: 13.5px; color: var(--text-light); margin-top: 6px; line-height: 1.6; }
.ad-card .ac-price { font-size: 19px; font-weight: 800; color: var(--red); margin-top: 10px; }
.ad-card .ac-price .neg { font-size: 13px; font-weight: 600; color: var(--text-light); }
.ad-card .ac-foot {
    border-top: 1px solid var(--border); padding: 11px 18px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--text-light);
}
.ad-card .ac-foot i { margin-right: 5px; color: var(--red); }

/* Gazete görünümü — sıkışık metin sütunları */
.paper {
    background: #fffdf7;
    border: 1px solid #e4ddc9;
    border-radius: var(--radius);
    padding: 28px 30px;
    box-shadow: var(--shadow);
}
.paper-head {
    text-align: center;
    border-bottom: 3px double var(--navy);
    padding-bottom: 14px;
    margin-bottom: 22px;
}
.paper-head .ph-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px; font-weight: 700; color: var(--navy);
    letter-spacing: 2px; text-transform: uppercase;
}
.paper-head .ph-sub {
    font-size: 12px; color: var(--text-light);
    letter-spacing: 3px; text-transform: uppercase; margin-top: 4px;
}
.paper-cols { column-count: 3; column-gap: 28px; column-rule: 1px solid #e4ddc9; }
.paper-block { break-inside: avoid; margin-bottom: 22px; }
.paper-block h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--navy);
    border-bottom: 2px solid var(--navy);
    padding-bottom: 5px; margin-bottom: 10px;
}
.paper-ad {
    font-size: 13px; line-height: 1.65;
    padding: 8px 0;
    border-bottom: 1px dotted #d8d0b8;
    break-inside: avoid;
}
.paper-ad:last-child { border-bottom: none; }
.paper-ad .pa-title { font-weight: 700; color: var(--heading); }
.paper-ad .pa-title:hover { color: var(--red); }
.paper-ad .pa-text { color: var(--text); }
.paper-ad .pa-meta { color: var(--text-light); font-size: 12px; margin-top: 2px; }
.paper-ad .pa-meta strong { color: var(--red); }
.paper-ad.featured {
    background: #fff8e6;
    border: 1px solid #ecdca8;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
}

/* İlan listesi (satır görünümü) */
.ad-rows { display: flex; flex-direction: column; gap: 12px; }
.ad-row {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 18px;
    transition: all .18s;
}
.ad-row:hover { box-shadow: var(--shadow-lg); border-color: #d6dae1; }
.ad-row .ar-thumb {
    width: 96px; height: 74px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #e9ebef, #dcdfe5);
    display: flex; align-items: center; justify-content: center;
    color: #b3bac4; font-size: 20px; flex-shrink: 0;
}
.ad-row .ar-main { flex: 1; min-width: 0; }
.ad-row .ar-tags { display: flex; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.tag {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: var(--bg); color: var(--text-light);
}
.tag.t-job { background: var(--red-soft); color: var(--red); }
.tag.t-sale { background: #e8f7ee; color: var(--green); }
.tag.t-rent { background: #e7efff; color: #2563eb; }
.tag.t-urgent { background: var(--amber-soft); color: #8a6600; }
.ad-row .ar-title { font-size: 15.5px; font-weight: 700; color: var(--heading); }
.ad-row .ar-title:hover { color: var(--red); }
.ad-row .ar-meta { font-size: 12.5px; color: var(--text-light); display: flex; gap: 16px; margin-top: 5px; flex-wrap: wrap; }
.ad-row .ar-meta i { margin-right: 5px; color: var(--red); }
.ad-row .ar-side { text-align: right; flex-shrink: 0; }
.ad-row .ar-price { font-size: 19px; font-weight: 800; color: var(--red); }
.ad-row .ar-price .neg { font-size: 13px; font-weight: 600; color: var(--text-light); }

/* ============================================================
   REKLAM ALANLARI — Google AdSense uyumlu
   Her slot data-ad-slot ile adlandırılır; panelden kod basılır.
   Politika notu: reklam alanı içerikten net ayrılır ve "Reklam"
   etiketi taşır; tıklamaya teşvik eden ifade kullanılmaz.
   ============================================================ */
.ad-slot {
    position: relative;
    background: #f0f2f5;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}
.ad-slot::before {
    content: "Reklam";
    position: absolute;
    top: 6px; left: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a8b0ba;
}
.ad-slot .ad-inner {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #b3bac4; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.ad-slot ins { display: block; width: 100%; }

/* Yerleşim varyantları */
.ad-leaderboard { min-height: 100px; max-width: 970px; margin: 30px auto; }      /* 970x90 / 728x90 */
.ad-rectangle   { min-height: 250px; max-width: 336px; }                          /* 336x280 / 300x250 */
.ad-skyscraper  { min-height: 600px; max-width: 300px; }                          /* 300x600 */
.ad-infeed      { min-height: 120px; width: 100%; margin: 4px 0; }                /* akış içi */
.ad-article     { min-height: 200px; width: 100%; margin: 24px 0; }               /* makale içi */
.ad-mobile      { display: none; min-height: 100px; width: 100%; margin: 20px 0; }/* 320x100 */

/* Kenar çubuğunda yapışkan reklam */
.ad-sticky { position: sticky; top: 92px; }

/* Bölümler arası ince ayraçlı reklam bandı */
.ad-band { padding: 10px 0 0; }

@media (max-width: 768px) {
    .ad-leaderboard { min-height: 100px; }
    .ad-skyscraper { min-height: 250px; max-width: 100%; }
    .ad-rectangle { max-width: 100%; }
    .ad-mobile { display: flex; }
    .ad-hide-sm { display: none; }
}

/* ---------------- Nasıl Çalışır ---------------- */
.how {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 62px 0; margin-top: 40px; text-align: center;
}
.how .section-head { justify-content: center; text-align: center; display: block; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.how-step { position: relative; padding: 0 20px; }
.how-step .hs-num {
    position: absolute; top: -12px; left: 50%;
    transform: translate(30px, 0);
    background: var(--navy); color: #fff;
    font-size: 12px; font-weight: 800;
    width: 26px; height: 26px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
}
.how-step .hs-icon {
    width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.how-step h3 { font-size: 17px; margin-bottom: 8px; }
.how-step p { font-size: 14px; color: var(--text-light); max-width: 280px; margin: 0 auto; }

/* ---------------- Haberler ---------------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; transition: all .2s;
}
.news-card:hover { box-shadow: var(--shadow-lg); }
.news-card .nc-thumb {
    height: 160px; background: linear-gradient(135deg, #4a4858, #2b2a35);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.25); font-size: 30px;
}
.news-card .nc-body { padding: 18px 20px 20px; }
.news-card .nc-meta { font-size: 12.5px; color: var(--text-light); display: flex; gap: 14px; margin-bottom: 8px; }
.news-card .nc-meta i { color: var(--red); margin-right: 4px; }
.news-card h3 { font-size: 15.5px; line-height: 1.45; }
.news-card h3 a:hover { color: var(--red); }

/* ---------------- CTA ---------------- */
.cta { margin: 70px 0; }
.cta .cta-inner {
    background:
        radial-gradient(600px 300px at 88% 0%, rgba(227, 30, 36, .35), transparent 62%),
        linear-gradient(140deg, #383745, #1f1e28);
    border-radius: 24px; color: #fff; padding: 54px 58px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; position: relative; overflow: hidden;
}
.cta h2 { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.5px; max-width: 520px; }
.cta p { color: #b9b7c6; margin-top: 10px; max-width: 480px; }
.cta .cta-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ---------------- Footer ---------------- */
.footer { background: var(--navy); color: #a8a6b6; padding: 60px 0 0; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer .logo img { height: 44px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer .about-text { font-size: 13.5px; line-height: 1.7; max-width: 300px; }
.footer h4 { color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.footer-links li { padding: 5px 0; font-size: 13.5px; }
.footer-links a:hover { color: var(--amber); }
.footer-contact li { padding: 6px 0; font-size: 13.5px; display: flex; gap: 10px; align-items: baseline; }
.footer-contact i { color: var(--amber); font-size: 13px; width: 16px; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.07);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all .15s;
}
.footer-social a:hover { background: var(--red); color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px;
}
.footer-bottom a:hover { color: var(--amber); }

/* ============================================================
   İÇ SAYFALAR — ortak
   ============================================================ */
.page-hero {
    background:
        radial-gradient(600px 260px at 90% -20%, rgba(227, 30, 36, .3), transparent 62%),
        linear-gradient(150deg, #383745, #2b2a35);
    color: #fff; padding: 40px 0;
}
.page-hero .breadcrumb {
    font-size: 13px; color: #918fa2; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.page-hero .breadcrumb a:hover { color: var(--amber); }
.page-hero h1 { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.page-hero .page-sub { color: #b9b7c6; margin-top: 6px; font-size: 15px; }
.page-hero .ph-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

.page-body { padding: 40px 0 70px; }

.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    margin-bottom: 24px; overflow: hidden;
}
.card-header {
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
.card-header i { color: var(--red); font-size: 16px; }
.card-header h2, .card-header h3 { font-size: 17px; font-weight: 700; }
.card-body { padding: 24px; }

/* ---------------- Form Elemanları ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; color: var(--heading); margin-bottom: 7px; }
.form-group label .req { color: var(--red); }
.form-control {
    width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 14px; font-size: 14px; color: var(--heading);
    background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(227, 30, 36, .12); }
textarea.form-control { resize: vertical; min-height: 110px; }
.form-hint { font-size: 12.5px; color: var(--text-light); margin-top: 6px; }

/* ============================================================
   FİRMA / İLAN EKLEME SAYFASI
   ============================================================ */
.add-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

.steps { display: flex; gap: 8px; margin-bottom: 28px; }
.step {
    flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 13px 16px; display: flex; align-items: center; gap: 12px;
    font-size: 13.5px; font-weight: 600; color: var(--text-light);
}
.step .st-num {
    width: 28px; height: 28px; border-radius: 999px; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.step.active { border-color: var(--red); color: var(--heading); }
.step.active .st-num { background: var(--red); color: #fff; }

/* Harita seçici */
.map-picker { position: relative; }
.map-picker #map { height: 380px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); z-index: 1; }
.map-hint {
    display: flex; align-items: center; gap: 10px;
    background: var(--amber-soft); border: 1px solid #f2dfa4; color: #7a5c00;
    font-size: 13.5px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px;
}
.map-hint i { font-size: 15px; }
.coords-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 14px; align-items: end; }

/* Yükleme alanı */
.upload-box {
    border: 2px dashed var(--border); border-radius: var(--radius-sm);
    padding: 34px 20px; text-align: center; color: var(--text-light);
    transition: all .15s; cursor: pointer;
}
.upload-box:hover { border-color: var(--red); background: #fff8f8; }
.upload-box i { font-size: 28px; color: var(--red); margin-bottom: 10px; }
.upload-box .up-title { font-weight: 600; color: var(--heading); font-size: 14px; }
.upload-box .up-sub { font-size: 12.5px; margin-top: 3px; }

/* Yan özet kutusu */
.side-note { position: sticky; top: 92px; }
.side-note .card-body { font-size: 14px; }
.check-list li { display: flex; gap: 10px; padding: 7px 0; font-size: 13.5px; align-items: baseline; }
.check-list i { color: var(--green); font-size: 13px; }

/* ============================================================
   LİSTE SAYFALARI
   ============================================================ */
.list-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.filter-box .card-body { padding: 20px; }
.filter-group { margin-bottom: 22px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; color: var(--heading); }
.filter-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.filter-check input { accent-color: var(--red); width: 15px; height: 15px; }
.filter-check .fc-cnt { margin-left: auto; color: var(--text-light); font-size: 12px; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.list-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.list-toolbar .result-info { font-size: 14px; }
.list-toolbar .result-info strong { color: var(--heading); }
.list-toolbar select {
    border: 1.5px solid var(--border); border-radius: 999px;
    padding: 9px 16px; font-size: 13.5px; background: #fff; outline: none;
}
.toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 34px; }
.pagination a {
    min-width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #fff; border: 1px solid var(--border);
    font-size: 14px; font-weight: 600; color: var(--text); padding: 0 8px;
}
.pagination a:hover { border-color: var(--navy); color: var(--heading); }
.pagination a.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ============================================================
   FİRMA DETAY
   ============================================================ */
.detail-cover {
    height: 240px;
    background:
        radial-gradient(600px 220px at 80% 0%, rgba(227, 30, 36, .3), transparent 62%),
        linear-gradient(140deg, #43414f, #1f1e28);
    position: relative;
}
.detail-head { background: #fff; border-bottom: 1px solid var(--border); }
.detail-head .dh-inner { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.detail-head .dh-logo {
    width: 110px; height: 110px; border-radius: 22px;
    background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; color: var(--text-light);
    margin-top: -46px; flex-shrink: 0; position: relative; z-index: 2;
}
.detail-head .dh-info { flex: 1; padding-top: 16px; min-width: 260px; }
.detail-head .dh-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.badge-verified {
    display: inline-flex; align-items: center; gap: 5px;
    background: #e8f7ee; color: var(--green);
    font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.detail-head .dh-meta {
    display: flex; align-items: center; gap: 18px; margin-top: 8px;
    font-size: 13.5px; color: var(--text-light); flex-wrap: wrap;
}
.detail-head .dh-meta i { margin-right: 5px; color: var(--red); }
.detail-head .dh-meta .stars { color: var(--amber); letter-spacing: 1px; }
.detail-head .dh-meta .score { font-weight: 700; color: var(--heading); }
.detail-head .dh-actions { display: flex; gap: 10px; padding-top: 22px; flex-wrap: wrap; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.detail-layout > * { min-width: 0; }
.about-text { line-height: 1.85; font-size: 14.5px; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-grid .g-item {
    aspect-ratio: 4 / 3; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #e9ebef, #dcdfe5);
    display: flex; align-items: center; justify-content: center;
    color: #b3bac4; font-size: 20px;
}

.info-list li {
    display: flex; gap: 14px; padding: 13px 0;
    border-bottom: 1px solid var(--border); font-size: 14px; align-items: flex-start;
}
.info-list li:last-child { border-bottom: none; }
.info-list .il-icon {
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.info-list .il-label { font-size: 12px; color: var(--text-light); }
.info-list .il-value { font-weight: 600; color: var(--heading); word-break: break-word; }
.info-list .il-value a:hover { color: var(--red); }

.detail-map #dmap { height: 260px; border-radius: 0 0 var(--radius) var(--radius); z-index: 1; }

.hours-list li {
    display: flex; justify-content: space-between; padding: 8px 0;
    font-size: 13.5px; border-bottom: 1px dashed var(--border);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list .day { color: var(--text); }
.hours-list .time { font-weight: 600; color: var(--heading); }
.hours-list li.closed .time { color: var(--red); }

.review { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: none; }
.review .rv-avatar {
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.review .rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review .rv-name { font-weight: 700; color: var(--heading); font-size: 14px; }
.review .rv-date { font-size: 12px; color: var(--text-light); }
.review .rv-stars { color: var(--amber); font-size: 12px; letter-spacing: 1px; }
.review p { font-size: 14px; margin-top: 6px; }

.empty-note {
    background: var(--amber-soft); border: 1px solid #f2dfa4; color: #7a5c00;
    padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px;
}

/* ============================================================
   İLAN DETAY
   ============================================================ */
.ad-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

/* Görsel galerisi */
.ad-gallery { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
.ad-gallery .agm-main {
    height: 400px;
    background: linear-gradient(135deg, #e9ebef, #d5d9e0);
    display: flex; align-items: center; justify-content: center;
    color: #b3bac4; font-size: 44px; position: relative;
}
.ad-gallery .agm-count {
    position: absolute; bottom: 14px; right: 14px;
    background: rgba(31,30,40,.8); color: #fff;
    font-size: 12.5px; font-weight: 600;
    padding: 6px 14px; border-radius: 999px;
}
.ad-gallery .agm-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px; }
.ad-gallery .agm-thumbs div {
    aspect-ratio: 4/3; border-radius: 8px;
    background: linear-gradient(135deg, #eef0f3, #e0e4ea);
    display: flex; align-items: center; justify-content: center;
    color: #b3bac4; font-size: 14px; cursor: pointer;
    border: 2px solid transparent;
}
.ad-gallery .agm-thumbs div.active { border-color: var(--red); }

/* İlan başlık bloğu */
.ad-title-block { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.ad-title-block h1 { font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.ad-title-block .atb-meta {
    display: flex; gap: 18px; margin-top: 10px;
    font-size: 13.5px; color: var(--text-light); flex-wrap: wrap;
}
.ad-title-block .atb-meta i { margin-right: 5px; color: var(--red); }
.ad-title-block .atb-price { text-align: right; }
.ad-title-block .atb-price .p-val { font-size: 30px; font-weight: 800; color: var(--red); line-height: 1.1; }
.ad-title-block .atb-price .p-neg { font-size: 13px; color: var(--text-light); font-weight: 600; }

/* Özellik tablosu */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.spec-grid .spec {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: 14px;
}
.spec-grid .spec .s-key { color: var(--text-light); }
.spec-grid .spec .s-val { font-weight: 600; color: var(--heading); text-align: right; }

/* İlan sahibi kutusu */
.seller-box { text-align: center; }
.seller-box .sb-avatar {
    width: 66px; height: 66px; border-radius: 999px;
    background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; margin: 0 auto 12px;
}
.seller-box .sb-name { font-size: 16.5px; font-weight: 700; color: var(--heading); }
.seller-box .sb-type { font-size: 12.5px; color: var(--text-light); margin-top: 2px; }
.seller-box .sb-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Güvenlik uyarısı */
.safety-note {
    background: #fff8e6; border: 1px solid #ecdca8;
    border-radius: var(--radius-sm); padding: 14px 16px;
    font-size: 13px; line-height: 1.65; color: #7a5c00;
}
.safety-note strong { display: block; margin-bottom: 5px; color: #6b4f00; }
.safety-note li { padding-left: 16px; position: relative; margin-top: 4px; }
.safety-note li::before { content: "•"; position: absolute; left: 4px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
    .ad-detail-layout { grid-template-columns: 1fr; }
    .spec-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .firm-grid, .news-grid, .ad-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stats .stats-card { grid-template-columns: repeat(2, 1fr); }
    .stat { border-bottom: 1px solid var(--border); }
    .detail-layout, .add-layout { grid-template-columns: 1fr; }
    .side-note { position: static; }
    .list-layout { grid-template-columns: 1fr; }
    .cta .cta-inner { flex-direction: column; text-align: center; padding: 44px 30px; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .paper-cols { column-count: 2; }
}
@media (max-width: 768px) {
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--border);
        flex-direction: column; padding: 12px 20px; gap: 4px; box-shadow: var(--shadow-lg);
    }
    .nav.open { display: flex; }
    .nav-toggle { display: block; }
    .header-actions .btn-hide-sm { display: none; }
    .logo img { height: 38px; }
    .header .container { min-height: 74px; gap: 14px; }
    .hero h1 { font-size: 30px; }
    .hero-search { flex-direction: column; padding: 12px; border-radius: 0 14px 14px 14px; }
    .hero-search .hs-field + .hs-field { border-left: none; border-top: 1px solid var(--border); flex: 1; }
    .hero-search .btn { padding: 14px; }
    .cat-grid { grid-template-columns: 1fr 1fr; }
    .firm-grid, .news-grid, .how-grid, .ad-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .steps { flex-direction: column; }
    .coords-row { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .topbar .topbar-right { display: none; }
    .footer-cols { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .detail-head .dh-actions { padding-top: 10px; }
    .paper-cols { column-count: 1; }
    .paper { padding: 20px 18px; }
    .ad-row { flex-wrap: wrap; }
    .ad-row .ar-side { text-align: left; width: 100%; }
}

/* ============================================================
   HAVA DURUMU
   ============================================================ */

/* Anasayfa kompakt şerit */
.weather-strip {
    background: linear-gradient(135deg, #2f4a6d, #22334a);
    border-radius: var(--radius);
    color: #fff;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.weather-strip::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(500px 200px at 88% -20%, rgba(255,255,255,.12), transparent 60%);
    pointer-events: none;
}
.weather-strip .ws-now { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.weather-strip .ws-icon { font-size: 40px; color: #ffd75e; width: 52px; text-align: center; }
.weather-strip .ws-temp { font-size: 34px; font-weight: 800; line-height: 1; }
.weather-strip .ws-place { font-size: 13.5px; color: #c3cede; margin-top: 4px; }
.weather-strip .ws-place strong { color: #fff; }
.weather-strip .ws-desc { font-size: 13px; color: #ffd75e; font-weight: 600; }
.weather-strip .ws-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.15); }
.weather-strip .ws-days { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.weather-strip .ws-day { text-align: center; min-width: 62px; }
.weather-strip .ws-day .d-name { font-size: 11.5px; color: #c3cede; text-transform: uppercase; letter-spacing: .5px; }
.weather-strip .ws-day .d-icon { font-size: 18px; color: #ffd75e; margin: 6px 0; }
.weather-strip .ws-day .d-temp { font-size: 13px; font-weight: 700; }
.weather-strip .ws-day .d-temp .lo { color: #9fb0c5; font-weight: 500; }
.weather-strip .ws-select {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}
.weather-strip .ws-select option { color: #1f1e28; }
.weather-strip .ws-link { font-size: 13px; color: #ffd75e; font-weight: 600; white-space: nowrap; }
.weather-strip .ws-link:hover { text-decoration: underline; }

/* Detay sayfası — büyük kart */
.weather-hero {
    background:
        radial-gradient(600px 260px at 88% -30%, rgba(255,255,255,.14), transparent 62%),
        linear-gradient(135deg, #2f4a6d, #1e2c3f);
    border-radius: var(--radius);
    color: #fff;
    padding: 26px 30px 30px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.weather-hero .wh-top {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 22px; margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.weather-hero .wh-top .wh-title { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 9px; }
.weather-hero .wh-top .wh-title i { color: #ffd75e; }
.weather-hero .wh-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.weather-hero .wh-select {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff; border-radius: 999px;
    padding: 9px 18px; font-size: 13.5px; font-weight: 600;
    outline: none; cursor: pointer; min-width: 200px;
}
.weather-hero .wh-select option { color: #1f1e28; }
.weather-hero .wh-geo {
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 999px;
    padding: 9px 16px; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
}
.weather-hero .wh-geo:hover { background: rgba(255,255,255,.12); }
.weather-hero .wh-body {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
}
.weather-hero .wh-main { display: flex; align-items: center; gap: 24px; }
.weather-hero .wh-icon { font-size: 68px; color: #ffd75e; }
.weather-hero .wh-temp { font-size: 58px; font-weight: 800; line-height: 1; }
.weather-hero .wh-desc { font-size: 17px; color: #ffd75e; font-weight: 600; margin-top: 6px; }
.weather-hero .wh-place { font-size: 14px; color: #c3cede; margin-top: 3px; }
.weather-hero .wh-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 34px; }
.weather-hero .wh-stat .s-label { font-size: 12px; color: #9fb0c5; text-transform: uppercase; letter-spacing: .5px; }
.weather-hero .wh-stat .s-val { font-size: 18px; font-weight: 700; margin-top: 2px; }
.weather-hero .wh-stat i { color: #ffd75e; margin-right: 7px; font-size: 14px; }

/* Saatlik şerit */
.hourly-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.hourly-scroll .hr-item {
    flex: 0 0 78px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    padding: 12px 6px;
}
.hourly-scroll .hr-item.now { border-color: var(--red); background: var(--red-soft); }
.hourly-scroll .hr-time { font-size: 12px; color: var(--text-light); font-weight: 600; }
.hourly-scroll .hr-icon { font-size: 18px; color: var(--amber-600); margin: 8px 0; }
.hourly-scroll .hr-temp { font-size: 14.5px; font-weight: 700; color: var(--heading); }

/* Günlük tahmin listesi */
.forecast-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.forecast-list li:last-child { border-bottom: none; }
.forecast-list .f-day { width: 110px; font-weight: 700; color: var(--heading); font-size: 14px; flex-shrink: 0; }
.forecast-list .f-day span { display: block; font-size: 12px; color: var(--text-light); font-weight: 400; }
.forecast-list .f-icon { font-size: 20px; color: var(--amber-600); width: 34px; text-align: center; flex-shrink: 0; }
.forecast-list .f-desc { flex: 1; font-size: 13.5px; }
.forecast-list .f-rain { font-size: 12.5px; color: #2563eb; width: 70px; flex-shrink: 0; }
.forecast-list .f-rain i { margin-right: 5px; }
.forecast-list .f-temp { font-size: 14.5px; font-weight: 700; color: var(--heading); width: 96px; text-align: right; flex-shrink: 0; }
.forecast-list .f-temp .lo { color: var(--text-light); font-weight: 500; }

/* İlçe kartı ızgarası */
.wx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wx-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all .18s;
}
.wx-card:hover { border-color: var(--red); box-shadow: var(--shadow-lg); }
.wx-card.active { border-color: var(--red); background: #fffafa; }
.wx-card .wx-name { font-weight: 700; color: var(--heading); font-size: 14.5px; }
.wx-card .wx-sub { font-size: 12px; color: var(--text-light); }
.wx-card .wx-right { display: flex; align-items: center; gap: 12px; }
.wx-card .wx-icon { font-size: 22px; color: var(--amber-600); }
.wx-card .wx-temp { font-size: 20px; font-weight: 800; color: var(--heading); }

/* Yükleniyor / hata durumu */
.wx-loading { color: var(--text-light); font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.wx-error {
    background: var(--red-soft); border: 1px solid #f6c9c9; color: #a01a1f;
    padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px;
}

@media (max-width: 1024px) {
    .wx-grid { grid-template-columns: repeat(3, 1fr); }
    .weather-hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
    .wx-grid { grid-template-columns: repeat(2, 1fr); }
    .weather-strip { flex-direction: column; align-items: stretch; gap: 16px; }
    .weather-strip .ws-sep { display: none; }
    .weather-strip .ws-days { justify-content: space-between; gap: 8px; }
    .weather-hero .wh-temp { font-size: 46px; }
    .weather-hero .wh-icon { font-size: 52px; }
    .forecast-list .f-desc { display: none; }
}

/* ============================================================
   ULAŞIM
   ============================================================ */

/* Ulaşım türü kartları */
.transit-modes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 26px; }
.mode-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 14px;
    text-align: center;
    transition: all .18s;
}
.mode-card:hover { border-color: var(--red); box-shadow: var(--shadow-lg); }
.mode-card.active { border-color: var(--red); background: #fffafa; box-shadow: var(--shadow); }
.mode-card .mc-icon {
    width: 50px; height: 50px; margin: 0 auto 10px;
    border-radius: 15px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    transition: all .18s;
}
.mode-card.active .mc-icon, .mode-card:hover .mc-icon { background: var(--red); color: #fff; }
.mode-card .mc-name { font-size: 13.5px; font-weight: 700; color: var(--heading); }
.mode-card .mc-sub { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }

/* Hat şeması — istasyon zinciri */
.line-map { padding: 6px 0; }
.line-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.line-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 30px; padding: 0 12px;
    border-radius: 8px; color: #fff;
    font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
.line-head .line-name { font-weight: 700; color: var(--heading); font-size: 15px; }
.line-head .line-meta { font-size: 12.5px; color: var(--text-light); margin-left: auto; }

.stations { display: flex; flex-wrap: wrap; gap: 0; padding-left: 4px; }
.station {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    width: 100%;
    position: relative;
}
.station .st-dot {
    width: 13px; height: 13px; border-radius: 999px;
    border: 3px solid var(--red); background: #fff;
    flex-shrink: 0; z-index: 1;
}
.station.transfer .st-dot { background: var(--amber); border-color: var(--amber-600); width: 15px; height: 15px; }
.station::before {
    content: ""; position: absolute;
    left: 6px; top: 0; bottom: 0; width: 3px;
    background: var(--red-soft);
}
.station:first-child::before { top: 50%; }
.station:last-child::before { bottom: 50%; }
.station .st-name { color: var(--text); font-weight: 500; }
.station.transfer .st-name { font-weight: 700; color: var(--heading); }
.station .st-tag {
    font-size: 10.5px; font-weight: 700;
    background: var(--amber-soft); color: #8a6600;
    padding: 2px 9px; border-radius: 999px;
}

/* Sefer saatleri tablosu */
.timetable { width: 100%; border-collapse: collapse; font-size: 14px; }
.timetable th {
    text-align: left;
    font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-light); font-weight: 700;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.timetable td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.timetable tr:last-child td { border-bottom: none; }
.timetable tbody tr:hover { background: var(--bg); }
.timetable .t-time { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.timetable .t-route { color: var(--text); }
.timetable .t-price { font-weight: 700; color: var(--red); text-align: right; white-space: nowrap; }
.timetable .t-note { font-size: 12px; color: var(--text-light); }
.table-wrap { overflow-x: auto; }

/* Ücret kartları */
.fare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fare-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
}
.fare-card .f-label { font-size: 12.5px; color: var(--text-light); }
.fare-card .f-price { font-size: 21px; font-weight: 800; color: var(--heading); margin-top: 4px; }
.fare-card.highlight { background: var(--red-soft); border-color: #f6c9c9; }
.fare-card.highlight .f-price { color: var(--red); }

/* Rota planlayıcı */
.route-planner {
    background: linear-gradient(135deg, #2f4a6d, #1e2c3f);
    border-radius: var(--radius);
    padding: 24px 26px;
    color: #fff;
    margin-bottom: 24px;
}
.route-planner h2 { color: #fff; font-size: 17px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.route-planner h2 i { color: #ffd75e; }
.route-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.route-form .rf-field {
    flex: 1; min-width: 200px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 0 18px;
    display: flex; align-items: center; gap: 10px;
}
.route-form .rf-field i { color: #ffd75e; font-size: 13px; }
.route-form .rf-field input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-size: 14px; padding: 12px 0;
}
.route-form .rf-field input::placeholder { color: #a9b8cb; }
.route-form .rf-swap {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; width: 42px; height: 42px;
    border-radius: 999px; flex-shrink: 0;
}
.route-form .rf-swap:hover { background: rgba(255,255,255,.22); }

/* Duyuru / uyarı kutusu */
.notice {
    display: flex; gap: 12px;
    background: var(--amber-soft);
    border: 1px solid #f2dfa4;
    color: #7a5c00;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.notice i { font-size: 15px; margin-top: 2px; }
.notice strong { display: block; margin-bottom: 2px; }

@media (max-width: 1024px) {
    .transit-modes { grid-template-columns: repeat(3, 1fr); }
    .fare-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .transit-modes { grid-template-columns: repeat(2, 1fr); }
    .route-form .rf-swap { display: none; }
}

/* ============================================================
   YAZDIRMA — gazete görünümünden PDF üretimi
   Tarayıcının "PDF olarak kaydet" çıktısı ilan gazetesi olur.
   ============================================================ */
@media print {
    @page { size: A4; margin: 14mm 12mm; }

    body { background: #fff; font-size: 11px; }

    /* Ekrana ait her şey gizlenir */
    .topbar, .header, .page-hero, .footer, .tabs, .filter-box,
    .list-toolbar, .pagination, .ad-slot, #viewList, .ph-actions,
    .nav-toggle, .view-switch { display: none !important; }

    .page-body { padding: 0; }
    .container { max-width: none; padding: 0; }
    .list-layout { display: block; }

    /* Gazete bloğu her koşulda görünür */
    #viewPaper { display: block !important; }
    .paper { background: #fff; border: none; box-shadow: none; padding: 0; border-radius: 0; }
    .paper-head { border-bottom: 3px double #000; }
    .paper-head .ph-title { font-size: 26px; color: #000; }
    .paper-cols { column-count: 3; column-gap: 8mm; column-rule: .5pt solid #999; }
    .paper-block h3 { color: #000; border-bottom-color: #000; font-size: 12px; }
    .paper-ad { border-bottom: .5pt dotted #999; page-break-inside: avoid; font-size: 10px; }
    .paper-ad .pa-title { color: #000; }
    .paper-ad .pa-text { color: #222; }
    .paper-ad .pa-meta { color: #333; }
    .paper-ad .pa-meta strong { color: #000; }
    .paper-ad.featured { background: #f2f2f2; border: .5pt solid #999; }

    a { text-decoration: none; color: #000; }
}


/* ——— Açılışta sayfanın oynamasını önleyen ölçüler ——— */

/* Hava şeridi verisi sonradan gelir; alanı baştan ayrılır. */
.weather-strip { min-height: 104px; }
.ws-days { min-height: 46px; }


/* Kart ve şerit görsellerinin alanı baştan bellidir. */
.firm-card .fc-cover { min-height: 150px; }
.news-card .nc-thumb { min-height: 160px; }

/* ============================================================
   EKLEME SEÇİM SAYFASI
   ============================================================ */
.ekle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ekle-kart {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 26px 26px;
    display: flex;
    flex-direction: column;
    transition: all .2s;
}
.ekle-kart:hover {
    border-color: var(--red);
    box-shadow: var(--shadow-lg);
    }
.ekle-kart .ek-ikon {
    width: 62px; height: 62px;
    border-radius: 18px;
    background: var(--red-soft);
    color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 25px;
    margin-bottom: 18px;
    transition: all .2s;
}
.ekle-kart:hover .ek-ikon { background: var(--red); color: #fff; }
.ekle-kart h2 { font-size: 20px; margin-bottom: 8px; }
.ekle-kart p { font-size: 14px; color: var(--text); line-height: 1.65; }
.ekle-kart .ek-liste { margin: 16px 0 20px; }
.ekle-kart .ek-liste li {
    display: flex; align-items: baseline; gap: 9px;
    font-size: 13.5px; padding: 4px 0;
}
.ekle-kart .ek-liste i { color: var(--green); font-size: 12px; }
.ekle-kart .ek-buton {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--navy); color: #fff;
    font-size: 14px; font-weight: 600;
    padding: 12px 20px; border-radius: 999px;
    transition: background .2s;
}
.ekle-kart:hover .ek-buton { background: var(--red); }

@media (max-width: 1024px) { .ekle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .ekle-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ETKİNLİKLER
   ============================================================ */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.event-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    gap: 16px;
    transition: all .2s;
}
.event-card:hover { border-color: var(--red); box-shadow: var(--shadow-lg); }
.event-card .ev-date-badge {
    width: 62px; flex-shrink: 0;
    background: var(--red-soft);
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 10px 0;
    height: fit-content;
}
.event-card .ed-gun { font-size: 23px; font-weight: 800; color: var(--red); line-height: 1; }
.event-card .ed-ay { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .5px; margin-top: 2px; }
.event-card .ev-body { display: flex; flex-direction: column; min-width: 0; }
.event-card .ev-tur {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--text-light); margin-bottom: 4px;
}
.event-card .ev-name { font-size: 15.5px; font-weight: 700; color: var(--heading); line-height: 1.4; }
.event-card:hover .ev-name { color: var(--red); }
.event-card .ev-meta {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12.5px; color: var(--text-light); margin-top: 8px;
}
.event-card .ev-meta i { color: var(--amber-600); width: 13px; }

@media (max-width: 1024px) { .event-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .event-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ÜYELİK
   ============================================================ */
.auth-kutu { max-width: 470px; margin: 20px auto 40px; }

.uyari-kirmizi, .uyari-yesil {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: var(--radius-sm);
    font-size: 14px; margin-bottom: 20px; line-height: 1.55;
}
.uyari-kirmizi { background: var(--red-soft); border: 1px solid #f6c9c9; color: #a3161b; }
.uyari-yesil   { background: #e8f7ee; border: 1px solid #b8e6c9; color: #14713a; }

.panel-ozet {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 24px;
}
.po-kutu {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px;
    display: flex; align-items: center; gap: 14px;
}
.po-ikon {
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.po-sayi { font-size: 24px; font-weight: 800; color: var(--heading); line-height: 1.1; display: block; }
.po-etiket { font-size: 12.5px; color: var(--text-light); }

/* Kullanıcı menüsü */
.uye-menu { position: relative; }
.uye-menu .um-dugme {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 14px 7px 7px;
    font-size: 14px; font-weight: 600; color: var(--heading);
}
.uye-menu .um-dugme:hover { border-color: var(--navy); }
.uye-menu .um-avatar {
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.uye-menu .um-liste {
    display: none; position: absolute; right: 0; top: calc(100% + 8px);
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    min-width: 190px; padding: 6px; z-index: 200;
}
.uye-menu.acik .um-liste { display: block; }
.uye-menu .um-liste a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; font-size: 14px; border-radius: 8px; color: var(--text);
}
.uye-menu .um-liste a:hover { background: var(--bg); color: var(--heading); }
.uye-menu .um-liste i { width: 15px; color: var(--text-light); font-size: 13px; }
.uye-menu .um-liste hr { border: none; border-top: 1px solid var(--border); margin: 5px 0; }

@media (max-width: 768px) { .panel-ozet { grid-template-columns: 1fr; } }

/* ============================================================
   İLAN SATIRI — liste görünümü
   Kartların yüksekliği ve sağ sütunu sabit tutulur; fiyatı olan ve
   olmayan ilanlarda "İncele" düğmesi aynı hizada kalır.
   ============================================================ */
.ad-list { display: flex; flex-direction: column; gap: 12px; }

.ad-row .ar-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ad-row .ar-body h3 {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--heading);
}
.ad-row .ar-body h3 a:hover { color: var(--red); }

/* Açıklama tek satırda tutulur; uzun metin kart yüksekliğini bozmasın. */
.ad-row .ar-desc {
    font-size: 13.5px;
    color: var(--text);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sağ sütun: üstte fiyat, altta düğme. Fiyat yoksa düğme yine altta kalır. */
.ad-row .ar-price {
    flex-shrink: 0;
    width: 168px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    text-align: right;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.ad-row .ar-price .p-val {
    font-size: 18.5px;
    font-weight: 800;
    color: var(--red);
    white-space: nowrap;
}
.ad-row .ar-price .btn { padding: 7px 18px; font-size: 13px; }

/* Öne çıkarılan ilan hafifçe belirtilir. */
.ad-row.featured {
    border-color: #f3d69a;
    background: linear-gradient(180deg, #fffdf7, #fff);
}

@media (max-width: 768px) {
    .ad-row { flex-wrap: wrap; }
    .ad-row .ar-thumb { width: 68px; height: 56px; }
    .ad-row .ar-price {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--border);
        padding-top: 10px;
        margin-top: 4px;
    }
}

/* ============================================================
   MESAJLAŞMA
   ============================================================ */
.konusma-listesi li { border-bottom: 1px solid var(--border); }
.konusma-listesi li:last-child { border-bottom: none; }
.kl-satir {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 22px; transition: background .15s;
}
.kl-satir:hover { background: var(--bg); }
.kl-satir.okunmamis { background: #fffaf5; }
.kl-avatar {
    width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
    background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
}
.kl-orta { flex: 1; min-width: 0; }
.kl-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kl-ad { font-weight: 700; color: var(--heading); font-size: 14.5px; }
.kl-rol {
    font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: var(--bg); color: var(--text-light);
}
.kl-konu { display: block; font-size: 13px; color: var(--text); margin-top: 2px; }
.kl-onizleme { display: block; font-size: 12.5px; color: var(--text-light); margin-top: 2px; }
.kl-sag { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kl-zaman { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.kl-rozet {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--red); color: #fff;
    font-size: 11.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

.mesaj-akisi {
    display: flex; flex-direction: column; gap: 12px;
    max-height: 520px; overflow-y: auto; padding: 4px;
}
.mesaj { display: flex; }
.mesaj.benim { justify-content: flex-end; }
.m-balon {
    max-width: 76%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px;
    padding: 12px 16px;
}
.mesaj.benim .m-balon {
    background: var(--red-soft);
    border-color: #f6c9c9;
    border-radius: 14px 14px 4px 14px;
}
.m-metin { font-size: 14px; line-height: 1.6; color: var(--text); }
.m-alt { font-size: 11.5px; color: var(--text-light); margin-top: 6px; }

/* ============================================================
   FİRMA DEĞERLENDİRME
   ============================================================ */
.puan-ozet {
    display: flex; align-items: center; gap: 28px;
    flex-wrap: wrap; padding-bottom: 20px;
    border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.puan-buyuk { text-align: center; }
.puan-buyuk .pb-sayi { font-size: 40px; font-weight: 800; color: var(--heading); line-height: 1; }
.puan-buyuk .pb-yildiz { color: var(--amber); font-size: 15px; letter-spacing: 2px; margin-top: 6px; }
.puan-buyuk .pb-adet { font-size: 12.5px; color: var(--text-light); margin-top: 4px; }
.puan-dagilim { flex: 1; min-width: 220px; }
.pd-satir { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 5px; }
.pd-satir .pd-etiket { width: 34px; color: var(--text-light); white-space: nowrap; }
.pd-cubuk { flex: 1; height: 7px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.pd-cubuk > span { display: block; height: 100%; background: var(--amber); }
.pd-satir .pd-adet { width: 26px; text-align: right; color: var(--text-light); }

.yorum { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.yorum:last-child { border-bottom: none; }
.yorum .y-avatar {
    width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
    background: var(--navy); color: var(--amber);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
}
.yorum .y-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yorum .y-ad { font-weight: 700; color: var(--heading); font-size: 14px; }
.yorum .y-yildiz { color: var(--amber); font-size: 12.5px; letter-spacing: 1px; }
.yorum .y-tarih { font-size: 12px; color: var(--text-light); }
.yorum .y-baslik { font-weight: 700; color: var(--heading); font-size: 14px; margin-top: 6px; }
.yorum p { font-size: 14px; margin-top: 4px; line-height: 1.65; }

/* Yıldızlı puan seçimi */
.yildiz-sec { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.yildiz-sec input { display: none; }
.yildiz-sec label {
    font-size: 26px; color: #d8dde3; cursor: pointer; transition: color .12s; line-height: 1;
}
.yildiz-sec label:hover,
.yildiz-sec label:hover ~ label,
.yildiz-sec input:checked ~ label { color: var(--amber); }

/* ============================================================
   REKLAM ALANLARI — mobil uyumlu ölçüler
   Otomatik reklam kullanılmaz; her alan elle yerleştirilir ve
   yalnızca panelden kod girildiğinde basılır.
   ============================================================ */

/* Reklam kutusu içeriğe göre daralır, taşma yapmaz. */
.ad-slot { max-width: 100%; overflow: hidden; }
.ad-slot > * { max-width: 100%; }
.ad-slot ins, .ad-slot iframe, .ad-slot img { max-width: 100% !important; height: auto; }

/* Yatay banner: geniş ekranda 970, tablette 728, telefonda 320 genişliğe iner. */
.ad-leaderboard { min-height: 90px; }
@media (max-width: 1024px) { .ad-leaderboard { min-height: 90px; } }
@media (max-width: 520px)  { .ad-leaderboard { min-height: 100px; } }

/* Kare/dikdörtgen: her boyutta 300×250 oranını korur. */
.ad-rectangle { min-height: 250px; }

/* Uzun dikey alan yalnızca geniş ekranda anlamlıdır. */
.ad-skyscraper { min-height: 600px; }
@media (max-width: 1024px) { .ad-skyscraper { display: none; } }

/* İçerik arası reklam */
.ad-article { min-height: 200px; margin: 26px 0; }

/* Yalnızca belirli boyutlarda görünen alanlar */
.ad-yalniz-mobil { display: none; }
@media (max-width: 768px) {
    .ad-yalniz-mobil { display: flex; }
    .ad-yalniz-masaustu { display: none; }
}

/* Sayfa genelinde reklam bandı */
.ad-band { margin: 26px auto; }
.ad-band:empty { display: none; margin: 0; }

/* ============================================================
   MOBİL DÜZELTMELERİ
   Satır içi grid tanımları medya sorgularını ezdiği için iki
   sütunlu ızgara artık sınıfla veriliyor.
   ============================================================ */
.firm-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
    .firm-grid-2 { grid-template-columns: 1fr; }
}

/* Sayfanın hiçbir yerinde yatay kaydırma oluşmamalı. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 768px) {
    /* Liste düzeni tek sütuna iner, kenar çubuğu içeriğin altına geçer */
    .list-layout, .detail-layout, .add-layout { grid-template-columns: 1fr; }
    .filter-box, .side-note { position: static; }

    /* Yapışkan kenar çubuğu telefonda anlamsız */
    .ad-sticky { position: static; }

    /* Araç çubuğu öğeleri alt alta sığsın */
    .list-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .list-toolbar select { width: 100%; }

    /* Uzun tablolar kendi içinde kaysın, sayfayı taşırmasın */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Sekmeler yatay kaydırmalı */
    .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .tabs a { white-space: nowrap; }

    /* Kart içerikleri taşmasın */
    .card, .firm-card, .ad-row, .event-card { max-width: 100%; }
    .about-text, .firm-card .fc-name, .ad-row h3 { overflow-wrap: anywhere; }
}

/* Izgara öğeleri varsayılan olarak içeriklerinden daralamaz; bu da uzun
   metin ya da geniş kutu olduğunda satırı taşırır. Hepsine sınır konur. */
.list-layout > *, .add-layout > *, .detail-layout > *,
.firm-grid > *, .cat-grid > *, .news-grid > *, .event-grid > *,
.ekle-grid > *, .form-grid > *, .panel-ozet > * { min-width: 0; }

.list-layout, .add-layout, .detail-layout { max-width: 100%; }

/* ============================================================
   DETAY SAYFASI AKIŞI
   "Benzer içerikler" bloğu ızgaranın üçüncü öğesidir.

   Kenar çubuğu sol sütundan uzun olduğu için, iki satırı birden kaplaması
   gerekir; aksi hâlde ilk satır kenar çubuğunun boyuna göre uzar ve sol
   tarafta boş bir alan kalırdı. Böylece benzer içerikler, açıklamanın
   hemen altından devam eder.

   Telefonda tek sütuna inildiğinde bu kısıtlar kalkar ve blok doğal
   olarak iletişim bilgilerinden SONRA gelir — okuyan kişi önce telefonu görür.
   ============================================================ */
.detail-layout > div:first-child { grid-column: 1; grid-row: 1; }
.detail-layout > aside           { grid-column: 2; grid-row: 1 / span 2; }
.detail-layout > .dl-alt         { grid-column: 1; grid-row: 2; }

@media (max-width: 1024px) {
    .detail-layout > div:first-child,
    .detail-layout > aside,
    .detail-layout > .dl-alt { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   MOBİL KULLANILABİLİRLİK
   ============================================================ */
@media (max-width: 768px) {

    /* iOS, yazı boyutu 16px'in altındaki bir alana dokunulduğunda sayfayı
       kendiliğinden yakınlaştırır ve kullanıcı elle geri çıkmak zorunda kalır.
       Tüm giriş alanları bu eşiğe çekildi. */
    input, select, textarea,
    .form-control, .hero-search input, .hero-search select,
    .list-toolbar select, .ws-select, .filter-box input, .filter-box select {
        font-size: 16px;
    }

    /* Dokunma hedefleri parmakla rahat basılacak yükseklikte olmalı. */
    .btn, button, select, input[type="submit"] { min-height: 44px; }
    .btn-sm { min-height: 40px; }

    .nav-toggle { min-width: 44px; min-height: 44px; font-size: 24px; }

    /* Metin bağlantılarında dokunma alanı, görünümü bozmadan genişletilir. */
    .see-all, .detail-link, .ws-link, .kl-satir, .um-liste a,
    .nav a, .footer-links a, .cat-list a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .footer-links a, .nav a { min-height: 42px; }

    /* Kart içi bağlantılar tüm satırı kaplasın */
    .firm-card .fc-name a, .news-card h3 a, .ad-row h3 a { display: block; padding: 3px 0; }

    /* Yatay kaydırmalı şeritler: içerik taşabilir ama sayfa taşmaz */
    .tabs, .table-wrap, .ws-days, .hourly-scroll, .wx-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .tabs > *, .ws-days > * { flex-shrink: 0; }

    /* Harita yüksekliği telefonda ekranı yutmasın */
    #harita, #dmap, #ulasimHarita { height: 260px !important; }

    /* Uzun başlıklar taşmasın */
    h1 { font-size: 26px; }
    h2 { font-size: 20px; }
    .hero h1 { font-size: 27px; }
    .detail-head h1 { font-size: 22px; }
}

/* Hero arka plan görselleri, büyüme animasyonu sırasında çerçeveyi aşmasın */
.hero-bg { overflow: hidden; }
.hero { overflow: hidden; }

/* Son mobil rötuşları */
@media (max-width: 768px) {
    /* Liste başlıkları parmakla rahat basılabilsin */
    .ad-row .ar-body h3 a,
    .firm-card .fc-name a,
    .news-card h3 a,
    .event-card,
    .cat-card { min-height: 44px; display: flex; align-items: center; }
    .news-card h3 a, .ad-row .ar-body h3 a { display: block; padding: 8px 0; }

    /* Hava şeridi ve rota planlayıcı alanları da yakınlaştırma eşiğinin üstünde */
    .weather-strip .ws-select,
    .route-planner .rf-field input,
    .weather-hero .wh-select { font-size: 16px; }

    /* Harita yakınlaştırma düğmeleri parmak boyutuna getirildi */
    .leaflet-control-zoom a {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 20px !important;
    }

    /* Alt bilgi bağlantıları arasında dokunma payı */
    .footer-bottom a { display: inline-block; padding: 8px 4px; }
}

@media (max-width: 768px) {
    /* Paragraf içi bağlantılar: yüksekliği büyütmek metin akışını bozacağı için
       dokunma alanı görünmez bir payla genişletilir. */
    .form-hint a, .filter-check a, p a, .about-text a, .info-list a {
        position: relative;
        padding: 6px 2px;
        margin: -6px -2px;
    }
}


/* ============================================================
   BİLDİR KUTUSU
   Kenar çubuğundaki diğer bloklarla aynı kart görünümünde durur;
   kapalıyken tek satır, tıklanınca form açılır.
   ============================================================ */
.bildir-kart { overflow: hidden; }

.bildir-dugme {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: none;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    transition: color .15s, background .15s;
}
.bildir-dugme:hover { background: var(--bg); color: var(--heading); }
.bildir-dugme .bd-sol { display: flex; align-items: center; gap: 10px; }
.bildir-dugme .bd-sol i { color: var(--text-light); font-size: 13px; }
.bildir-dugme .bd-ok { font-size: 11px; color: var(--text-light); transition: transform .2s; }
.bildir-kart.acik .bildir-dugme { border-bottom: 1px solid var(--border); }
.bildir-kart.acik .bildir-dugme .bd-ok { transform: rotate(180deg); }
.bildir-kart.acik .bildir-dugme .bd-sol i { color: var(--red); }

.bildir-govde { display: none; padding: 18px 20px 20px; }
.bildir-kart.acik .bildir-govde { display: block; }
.bildir-govde .bf-aciklama {
    font-size: 13.5px; color: var(--text); line-height: 1.6; margin-bottom: 16px;
}
.bildir-govde .form-group { margin-bottom: 14px; }
.bildir-govde textarea { min-height: 76px; }

/* ============================================================
   GÖRSEL YÜKLEME
   ============================================================ */
.istege-bagli { font-weight: 400; color: var(--text-light); font-size: 12.5px; }

.gorsel-birak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 26px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.gorsel-birak:hover { border-color: var(--red); background: #fffafa; }
.gorsel-birak.dolu { border-style: solid; border-color: var(--green); background: #f6fdf8; }
.gorsel-birak input[type="file"] { display: none; }
.gorsel-birak .gb-ikon {
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 6px;
}
.gorsel-birak.dolu .gb-ikon { background: #dff3e6; color: var(--green); }
.gorsel-birak .gb-baslik { font-size: 14px; font-weight: 600; color: var(--heading); }
.gorsel-birak .gb-alt { font-size: 12.5px; color: var(--text-light); }

.gorsel-onizleme { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gorsel-onizleme:empty { margin-top: 0; }
.go-kart {
    position: relative;
    width: 104px; height: 78px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.go-kart img { width: 100%; height: 100%; object-fit: cover; }
.go-kart .go-bilgi {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(31,30,40,.72); color: #fff;
    font-size: 10.5px; text-align: center; padding: 2px 0;
}

/* İçerik görselleri */
.icerik-gorsel {
    width: 100%; border-radius: var(--radius-sm);
    display: block; margin-bottom: 16px;
}
.firm-card .fc-cover img, .ad-row .ar-thumb img, .event-card .ev-gorsel img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Usta / hizmet ilanı rozeti */
.tag.t-hizmet { background: #eef4ff; color: #1e429f; }
.tag.t-hizmet i { font-size: 10px; margin-right: 3px; }

/* ============================================================
   YÖNETİM PANELİ
   ============================================================ */
.yonetim-menu {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px; margin-bottom: 22px;
}
.yonetim-menu a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; color: var(--text);
    transition: background .15s, color .15s;
}
.yonetim-menu a:hover { background: var(--bg); color: var(--heading); }
.yonetim-menu a.etkin { background: var(--navy); color: #fff; }
.yonetim-menu a.etkin i { color: var(--amber); }
.yonetim-menu i { font-size: 13px; color: var(--text-light); }
.ym-rozet {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

.yn-kutular { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.yn-kutu {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; text-align: center;
    transition: all .15s;
}
.yn-kutu:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.yn-kutu.vurgu { border-color: var(--red); background: #fffafa; }
.yk-sayi { display: block; font-size: 30px; font-weight: 800; color: var(--heading); line-height: 1; }
.yn-kutu.vurgu .yk-sayi { color: var(--red); }
.yk-etiket { display: block; font-size: 12.5px; color: var(--text-light); margin-top: 6px; }

.yn-istatistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.yn-istatistik .yi-sayi { font-size: 22px; font-weight: 800; color: var(--heading); }
.yn-istatistik .yi-etiket { font-size: 12.5px; color: var(--text-light); display: block; }

.onay-kart { margin-bottom: 14px; }
.onay-kart .ok-ust { display: flex; gap: 16px; align-items: flex-start; }
.onay-kart .ok-etiketler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.onay-kart h3 { font-size: 16.5px; margin-bottom: 6px; }
.onay-kart .ok-metin { font-size: 14px; color: var(--text); line-height: 1.6; }
.onay-kart .ok-meta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--text-light); margin-top: 10px;
}
.onay-kart .ok-meta i { color: var(--text-light); margin-right: 4px; }
.onay-kart .ok-gorsel {
    width: 120px; height: 90px; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--border); flex-shrink: 0;
}
.onay-kart .ok-islemler {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

.bildirim-duzeltme {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--amber-soft); border: 1px solid #f2dfa4;
    border-radius: var(--radius-sm); padding: 10px 14px;
    font-size: 13.5px; color: #7a5c00; margin: 10px 0;
}
.yonetici-notu {
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: 13px; color: var(--text); margin-top: 10px;
}
.bildirim-islem {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.bildirim-islem input[type="text"] { flex: 1; min-width: 200px; }

.reklam-kart { margin-bottom: 14px; }
.reklam-kart .rk-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.reklam-kart h3 { font-size: 15.5px; }
.reklam-kart .rk-slot { font-size: 12px; color: var(--text-light); background: var(--bg); padding: 2px 8px; border-radius: 5px; }
.reklam-kart .rk-anahtar { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.reklam-kart .kod-alani { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

.uye-arama { display: flex; gap: 10px; flex-wrap: wrap; }
.uye-arama input[type="search"] { flex: 1; min-width: 220px; }

@media (max-width: 1024px) {
    .yn-kutular { grid-template-columns: repeat(2, 1fr); }
    .yn-istatistik { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .yonetim-menu { overflow-x: auto; flex-wrap: nowrap; }
    .yonetim-menu a { white-space: nowrap; }
    .yn-kutular { grid-template-columns: 1fr; }
    .onay-kart .ok-ust { flex-direction: column; }
    .onay-kart .ok-gorsel { width: 100%; height: 160px; }
}

/* İçerik yönetimi ekranı */
.durum-suzgec {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.durum-suzgec a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text);
}
.durum-suzgec a:hover { border-color: var(--navy); }
.durum-suzgec a.etkin { background: var(--navy); border-color: var(--navy); color: #fff; }
.durum-suzgec a span {
    font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
    background: var(--bg); color: var(--text-light);
}
.durum-suzgec a.etkin span { background: rgba(255,255,255,.18); color: #fff; }

.toplu-cubuk {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.toplu-cubuk .tc-secim { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.toplu-cubuk .tc-sayac { font-size: 12.5px; color: var(--text-light); }
.toplu-cubuk .tc-islemler { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.icerik-tablo td { vertical-align: top; }
.icerik-tablo input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--red); }

@media (max-width: 768px) {
    .toplu-cubuk .tc-islemler { margin-left: 0; width: 100%; }
    .durum-suzgec { overflow-x: auto; flex-wrap: nowrap; }
    .durum-suzgec a { white-space: nowrap; }
}

/* ============================================================
   ÜST MENÜ — DAR EKRAN
   Giriş yapılmış durumda logo + üye menüsü + "Ekle" + hamburger
   yan yana sığmıyor, hamburger ekranın dışında kalıyordu.
   ============================================================ */
@media (max-width: 900px) {
    .header .container { gap: 10px; }

    /* Menü gizlenince "margin-right:auto" etkisiz kalıyor ve boşluk
       düğmelerle hamburgerin arasına düşüyordu. Düğmeler sağda tek
       grup olarak toplanır, boşluk logonun sağında kalır. */
    .header-actions { margin-left: auto; gap: 8px; }
    .nav-toggle { margin-left: 0; }

    /* Üye menüsünde yalnızca baş harf kalır; ad ve ok gizlenir */
    .uye-menu .um-dugme { padding: 6px; gap: 0; border-radius: 999px; }
    .uye-menu .um-dugme .um-ad,
    .uye-menu .um-dugme .fa-chevron-down { display: none; }
    .uye-menu .um-avatar { width: 34px; height: 34px; font-size: 13px; }

    /* Açılan liste ekrandan taşmasın */
    .uye-menu .um-liste { right: 0; left: auto; min-width: 200px; }
}

@media (max-width: 520px) {
    /* Çok dar ekranda "Ekle" düğmesi yalnızca simge olur */
    .header-actions .btn-red { padding: 0; width: 44px; justify-content: center; }
    .header-actions .btn-red .bd-metin { display: none; }
    .logo img { height: 34px; }
}

/* Menü açıkken sayfa kaymasın */
.nav.open { max-height: calc(100vh - 130px); overflow-y: auto; }

/* Saatlik tahmin şeridi her ekranda kendi içinde kayar */
.hourly-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}
.hourly-scroll .hr-item { flex-shrink: 0; }

@media (max-width: 768px) {
    /* Panelde kod alanları: iOS yakınlaştırmasını önlemek için 16px */
    .reklam-kart .kod-alani { font-size: 16px; }
}

/* 5 günlük tahmin satırı dar ekranda sarmalanır */
@media (max-width: 640px) {
    .forecast-list li { flex-wrap: wrap; gap: 8px 10px; }
    .forecast-list .f-day { width: auto; min-width: 96px; }
    .forecast-list .f-desc { flex: 1 1 100%; order: 5; font-size: 13px; }
    .forecast-list .f-rain { width: auto; }
    .forecast-list .f-temp { margin-left: auto; white-space: nowrap; }
}

/* Sayfalama uzun listelerde satıra sığmazsa alt satıra insin */
.pagination { flex-wrap: wrap; }

/* İki sütuna düşen istatistik kutularında yatay boşluk azalıyor;
   varsayılan 28 px iç boşlukla "Aktif İlan" gibi etiketler iki satıra
   kırılıyordu. */
@media (max-width: 700px) {
    .stat { padding: 18px 14px; gap: 11px; min-width: 0; }
    .stat .stat-icon { width: 42px; height: 42px; flex-shrink: 0; }
    .stat .stat-num { font-size: 21px; }
    .stat .stat-label { font-size: 12px; white-space: nowrap; }
}

/* 360 px altı (iPhone SE 1. nesil, katlanabilir kapalı ekran) */
@media (max-width: 360px) {
    .hero-stats .stats-card { grid-template-columns: 1fr; }
    .stat { padding: 16px 14px; gap: 10px; min-width: 0; border-right: none;
            border-bottom: 1px solid var(--border); }
    .stat:last-child { border-bottom: none; }
    .stat .stat-icon { width: 40px; height: 40px; flex-shrink: 0; }
    .weather-hero .wh-tools { width: 100%; }
    .weather-hero .wh-select { max-width: 100%; flex: 1 1 100%; }
}

/* Uzun kategori adları ("Valilik - Kaymakamlıklar") dar kartta taşmasın */
.cat-card > * { min-width: 0; }
.cat-card .cc-name { display: block; overflow-wrap: anywhere; }

/* İki sütunda uzun adlar harf harf kırılıp kartı uzatıyordu; telefonda
   tek sütun hem okunur hem de kart yükseklikleri eşit kalıyor. */
@media (max-width: 560px) {
    .cat-grid { grid-template-columns: 1fr; gap: 10px; }
    .cat-card { padding: 14px; gap: 12px; }
    .cat-card .cc-icon { width: 40px; height: 40px; flex-shrink: 0; }
    .cat-card .cc-name { font-size: 14.5px; overflow-wrap: normal; }
}

/* Sekmeler dar ekranda kaydırma gerektirmeden sığsın */
@media (max-width: 560px) {
    .tabs { gap: 2px; }
    .tabs a { padding: 10px 11px; font-size: 13px; gap: 6px; }
    .tabs a .t-cnt { font-size: 11px; padding: 1px 6px; }
}

/* Açılır menü bağlantıları parmakla rahat basılacak yükseklikte olmalı */
@media (max-width: 900px) {
    .nav.open a { min-height: 46px; display: flex; align-items: center;
                  padding: 10px 14px; font-size: 15px; }
}

/* Sekme şeridi kaydırılabilir olduğunda kenarlarda soluk gölge belirir;
   sekmelerin devamı olduğu böylece anlaşılır. Gölge yalnızca gerçekten
   kaydırılabiliyorken görünür (background-attachment: local/scroll). */
.tabs {
    background:
        linear-gradient(90deg, var(--card) 40%, rgba(255,255,255,0)) left / 26px 100% no-repeat local,
        linear-gradient(90deg, rgba(255,255,255,0), var(--card) 60%) right / 26px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(22,34,47,.14), rgba(22,34,47,0)) left / 11px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(22,34,47,.14), rgba(22,34,47,0)) right / 11px 100% no-repeat scroll;
    scroll-padding-inline: 12px;
}

/* Çok dar ekranda az sayıda sekme kaydırma gerektirmeden sığsın */
@media (max-width: 400px) {
    .tabs { gap: 0; }
    .tabs a { padding: 10px 8px; font-size: 12.5px; gap: 5px; }
}

/* ============================================================
   NÖBETÇİ ECZANE
   ============================================================ */
.eczane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.eczane-kart {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; background: var(--card);
    display: flex; flex-direction: column; gap: 10px;
}
.eczane-kart .ek-bas { display: flex; align-items: center; gap: 12px; }
.eczane-kart .ek-ikon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px; background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.eczane-kart .ek-ad { min-width: 0; }
.eczane-kart .ek-ad h3 { font-size: 15.5px; font-weight: 700; color: var(--heading); }
.eczane-kart .ek-yer { font-size: 12.5px; color: var(--text-light); }
.eczane-kart .ek-adres,
.eczane-kart .ek-tarif { font-size: 13.5px; color: var(--text); line-height: 1.55; }
.eczane-kart .ek-adres i,
.eczane-kart .ek-tarif i { color: var(--red); margin-right: 6px; }
.eczane-kart .ek-tarif { color: var(--text-light); font-size: 13px; }
.eczane-kart .ek-islem { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* Kart başlığındaki "tümü" bağlantısı */
.card-header .ch-link {
    margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--red);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.card-header .ch-link i { color: inherit; font-size: 9px; }

/* Kenar çubuğu bağlantı listesi */
.link-list { list-style: none; }
.link-list li + li { border-top: 1px solid var(--border); }
.link-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 2px; font-size: 14px; font-weight: 600; color: var(--heading);
    min-height: 44px;
}
.link-list a:hover { color: var(--red); }
.link-list .ll-not { font-size: 12.5px; font-weight: 500; color: var(--text-light); }

@media (max-width: 700px) {
    .eczane-grid { grid-template-columns: 1fr; }
}

/* Eczanenin nöbet saati; o an açıksa yeşil rozetle belirtilir */
.eczane-kart .ek-saat { font-size: 13px; color: var(--text-light);
                        display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.eczane-kart .ek-saat i { color: var(--text-light); }
.eczane-kart .ek-saat.acik { color: var(--heading); font-weight: 600; }
.eczane-kart .ek-saat.acik i { color: #16a34a; }
.eczane-kart .ek-ertesi { font-size: 12px; color: var(--text-light); font-weight: 400; }
.eczane-kart .ek-rozet {
    background: #dcfce7; color: #15803d; font-size: 11.5px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
}

/* Haberler ana menüde değil, üst şeritte durur. Üst şerit dar ekranda
   gizlendiği için bağlantı orada açılır menüye geri gelir. */
.nav .nav-sadece-mobil { display: none; }
@media (max-width: 900px) {
    .nav .nav-sadece-mobil { display: block; }
}

/* Üst şeritteki bağlantı, o bölümdeyken belirgin olur */
.topbar a.active { color: var(--amber); font-weight: 600; }

/* Haber kapak görseli — liste kartı ve detay sayfası */
.news-card .nc-thumb { overflow: hidden; }
.news-card .nc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card .nc-thumb.nc-bos { display: flex; align-items: center; justify-content: center; }

.haber-kapak { margin: 0 0 22px; border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.haber-kapak img { width: 100%; height: auto; display: block; }
.haber-kapak.nc-bos { display: none; }   /* görseli yoksa yer kaplamasın */