/* KOCAALI BELEDİYESİ — Ana Sayfa (2035 tarzı) Aydınlık + karanlık tema. Renkler CSS değişkenlerinde; ile değişir. */ :root { /* --- Aydınlık tema (varsayılan açık değerler) --- */ --bg: #f4f7fc; --bg2: #e9eef7; --ink: #0c1524; --muted: #46566b; --muted2: #7c8aa0; --line: rgba(12, 30, 55, 0.09); --line2: rgba(12, 30, 55, 0.16); --card: rgba(255, 255, 255, 0.72); --card-hover: rgba(255, 255, 255, 0.95); --card-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55)); --teal: #0d9488; --green: #059669; --cyan: #0284c7; --grad: linear-gradient(135deg, #0d9488 0%, #059669 48%, #0284c7 100%); --cta-on: #ffffff; --glow-a: rgba(13, 148, 136, 0.14); --glow-b: rgba(2, 132, 199, 0.12); --glow-c: rgba(5, 150, 105, 0.10); --grid: rgba(12, 30, 55, 0.045); --nav-bg: rgba(255, 255, 255, 0.72); --nav-hover: rgba(12, 30, 55, 0.05); --nav-active: rgba(12, 30, 55, 0.07); --dot-neutral: #0c1524; --shadow: 0 20px 50px rgba(15, 35, 60, 0.10); --accent-ring: rgba(13, 148, 136, 0.40); --brand-shadow: 0 6px 20px rgba(13, 148, 136, 0.35); --badge-cyan-bg: rgba(2, 132, 199, 0.10); --badge-cyan-bd: rgba(2, 132, 199, 0.22); --badge-green-bg: rgba(5, 150, 105, 0.10); --badge-green-bd: rgba(5, 150, 105, 0.22); } [data-theme="dark"] { /* --- Karanlık tema --- */ --bg: #060a12; --bg2: #0a1120; --ink: #e8eef6; --muted: #8fa0b5; --muted2: #5c6b80; --line: rgba(255, 255, 255, 0.08); --line2: rgba(255, 255, 255, 0.16); --card: rgba(255, 255, 255, 0.035); --card-hover: rgba(255, 255, 255, 0.06); --card-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); --teal: #2dd4bf; --green: #34d399; --cyan: #22d3ee; --grad: linear-gradient(135deg, #2dd4bf 0%, #34d399 48%, #22d3ee 100%); --cta-on: #04110d; --glow-a: rgba(45, 212, 191, 0.16); --glow-b: rgba(34, 211, 238, 0.13); --glow-c: rgba(52, 211, 153, 0.10); --grid: rgba(255, 255, 255, 0.025); --nav-bg: rgba(6, 10, 18, 0.65); --nav-hover: rgba(255, 255, 255, 0.05); --nav-active: rgba(255, 255, 255, 0.06); --dot-neutral: #e8eef6; --shadow: 0 20px 50px rgba(0, 0, 0, 0.45); --accent-ring: rgba(45, 212, 191, 0.35); --brand-shadow: 0 0 24px rgba(45, 212, 191, 0.45); --badge-cyan-bg: rgba(34, 211, 238, 0.12); --badge-cyan-bd: rgba(34, 211, 238, 0.25); --badge-green-bg: rgba(52, 211, 153, 0.12); --badge-green-bd: rgba(52, 211, 153, 0.25); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .3s ease, color .3s ease; } /* arka plan ışımaları */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1100px 520px at 12% -8%, var(--glow-a), transparent 60%), radial-gradient(900px 500px at 88% 2%, var(--glow-b), transparent 60%), radial-gradient(1200px 700px at 50% 120%, var(--glow-c), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } /* ince ızgara çizgileri */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%); } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } img { display: block; max-width: 100%; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---------- Üst gezinme ---------- */ .topnav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: var(--nav-bg); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav-brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--grad); color: var(--cta-on); font-weight: 800; font-size: 18px; box-shadow: var(--brand-shadow); } .brand-text { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.15; } .brand-text small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); } .nav-right { display: flex; align-items: center; gap: 10px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 8px 14px; border-radius: 10px; font-size: 14px; color: var(--muted); transition: color .18s, background .18s; } .nav-links a:hover { color: var(--ink); background: var(--nav-hover); } .nav-links a.is-active { color: var(--ink); background: var(--nav-active); } .nav-links a.nav-cta { margin-left: 8px; color: var(--cta-on); font-weight: 700; background: var(--grad); } .nav-links a.nav-cta:hover { color: var(--cta-on); filter: brightness(1.08); } /* tema düğmesi */ .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; transition: background .18s, border-color .18s, transform .15s; } .theme-toggle:hover { background: var(--card-hover); transform: translateY(-1px); } .theme-toggle .ico-sun { display: none; } .theme-toggle .ico-moon { display: block; } [data-theme="light"] .theme-toggle .ico-sun { display: block; } [data-theme="light"] .theme-toggle .ico-moon { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 84px 0 56px; } .hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } /* Hero sağ taraf: haberler (kırmızı alan) */ .hero-news { border: 1px solid var(--line); border-radius: 20px; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; } .hero-news-head { margin-bottom: 14px; } .hero-news-empty { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; } .hero-news-list { display: flex; flex-direction: column; gap: 10px; } .hn-item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-grad); transition: border-color .18s, transform .15s; } .hn-item:hover { border-color: var(--accent-ring); transform: translateY(-1px); } .hn-thumb { flex: 0 0 72px; width: 72px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--bg2); display: grid; place-items: center; color: var(--muted2); } .hn-thumb img { width: 100%; height: 100%; object-fit: cover; } .hn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hn-date { font-size: 11px; color: var(--teal); font-weight: 700; letter-spacing: .02em; } .hn-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--teal); text-transform: uppercase; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 var(--accent-ring); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero h1 { margin-top: 18px; font-size: clamp(34px, 6vw, 62px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-sub { margin-top: 20px; max-width: 560px; font-size: 17px; color: var(--muted); } .hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-size: 15px; font-weight: 700; transition: transform .15s, filter .15s, background .15s; } .btn-primary { background: var(--grad); color: var(--cta-on); box-shadow: var(--brand-shadow); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn-ghost { color: var(--ink); border: 1px solid var(--line2); background: var(--card); } .btn-ghost:hover { background: var(--card-hover); transform: translateY(-2px); } .hero-stats { margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; } .hs { min-width: 120px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; } .hs-n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .hs-l { font-size: 12.5px; color: var(--muted); } /* ---------- Metrikler ---------- */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0; } .metric { padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, transform .2s; } .metric:hover { border-color: var(--line2); transform: translateY(-2px); } .metric-label { display: block; font-size: 13px; color: var(--muted); } .metric-num { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 8px; } .metric-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot-teal { background: var(--teal); box-shadow: 0 0 10px var(--teal); } .dot-green { background: var(--green); box-shadow: 0 0 10px var(--green); } .dot-cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .dot-white { background: var(--dot-neutral); box-shadow: 0 0 10px var(--muted); } /* ---------- Bölümler ---------- */ .section { margin-top: 72px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .section-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--teal); text-transform: uppercase; } .section-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; } .section-count { font-size: 13px; color: var(--muted2); white-space: nowrap; } /* ---------- Operasyon kartları ---------- */ .op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .op-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-grad); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .2s, border-color .2s, box-shadow .2s; } .op-card:hover { transform: translateY(-4px); border-color: var(--accent-ring); box-shadow: var(--shadow), 0 0 0 1px var(--accent-ring); } .op-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .badge-ref { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--cyan); background: var(--badge-cyan-bg); border: 1px solid var(--badge-cyan-bd); padding: 4px 10px; border-radius: 999px; } .badge-done, .badge-solved { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--badge-green-bg); border: 1px solid var(--badge-green-bd); padding: 4px 10px; border-radius: 999px; } .op-title { margin-top: 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .op-desc { margin-top: 8px; font-size: 13.5px; color: var(--muted); flex: 1; } .op-loc { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); } .op-loc svg { color: var(--teal); } .op-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: 14px; } .op-stat { display: flex; flex-direction: column; gap: 2px; } .op-stat .v { font-size: 15px; font-weight: 700; } .op-stat .l { font-size: 11px; color: var(--muted2); } .op-foot { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted2); } .op-foot svg { color: var(--muted2); } /* ---------- Çözülen ihbarlar ---------- */ .ihbar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ihbar-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card-grad); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .2s, border-color .2s; } .ihbar-card:hover { transform: translateY(-4px); border-color: var(--accent-ring); } .ihbar-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg2); } .ihbar-media img { width: 100%; height: 100%; object-fit: cover; } .ihbar-nophoto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted2); background: radial-gradient(400px 160px at 50% 20%, var(--glow-a), transparent 70%); } .badge-solved { position: absolute; top: 12px; left: 12px; } .ihbar-body { padding: 18px 20px 20px; } .ihbar-desc { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .ihbar-meta { margin-top: 10px; font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; } .ihbar-meta .sep { color: var(--muted2); } .ihbar-date { margin-top: 10px; font-size: 12px; color: var(--muted2); } /* ---------- Haberler (carousel) ---------- */ .carousel-nav { display: flex; gap: 8px; } .car-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; transition: background .18s, transform .15s, border-color .18s; } .car-btn:hover { background: var(--card-hover); transform: translateY(-1px); border-color: var(--accent-ring); } .haber-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .haber-track::-webkit-scrollbar { display: none; } .haber-card { flex: 0 0 320px; scroll-snap-align: start; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card-grad); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .2s, border-color .2s; } .haber-card:hover { transform: translateY(-3px); border-color: var(--accent-ring); } .haber-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg2); } .haber-media img { width: 100%; height: 100%; object-fit: cover; } .haber-nophoto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted2); background: radial-gradient(400px 160px at 50% 20%, var(--glow-a), transparent 70%); } .haber-date { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; color: var(--cta-on); background: var(--grad); padding: 4px 10px; border-radius: 999px; } .haber-body { padding: 16px 18px 20px; } .haber-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; } .haber-ozet { margin-top: 8px; font-size: 13px; color: var(--muted); } /* ---------- CTA bandı ---------- */ .cta-band { margin-top: 80px; padding: 44px 40px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(600px 300px at 80% 20%, var(--glow-a), transparent 70%), linear-gradient(135deg, var(--card-hover), var(--card)); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cta-band h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; } .cta-band p { margin-top: 8px; color: var(--muted); font-size: 15px; } /* ---------- Boş durum ---------- */ .empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--line2); border-radius: 18px; color: var(--muted); } .empty-icon { font-size: 30px; color: var(--teal); opacity: .6; } .empty p { margin-top: 10px; font-size: 14px; } /* ---------- Alt bilgi ---------- */ .sitefoot { margin-top: 80px; border-top: 1px solid var(--line); padding: 28px 0 40px; } .foot-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted2); } /* ---------- Haber detay ---------- */ .haber-detay { max-width: 880px; padding-top: 40px; padding-bottom: 60px; } .geri { display: inline-block; margin-bottom: 18px; font-size: 14px; color: var(--muted); } .geri:hover { color: var(--ink); } .hd-card { border: 1px solid var(--line); border-radius: 22px; background: var(--card-grad); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 32px; } .hd-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hd-title { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin-top: 14px; } .hd-ozet { margin-top: 12px; font-size: 16px; color: var(--muted); } .hd-gallery { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .hd-photo { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); } .hd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hd-photo-main { grid-column: span 2; aspect-ratio: 16 / 9; } .hd-photo:not(.hd-photo-main) { aspect-ratio: 4 / 3; } .hd-icerik { margin-top: 24px; font-size: 15.5px; line-height: 1.85; color: var(--ink); } /* ---------- Flash bildirim ---------- */ .flash { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } .flash-ok { background: var(--badge-green-bg); color: var(--green); border: 1px solid var(--badge-green-bd); } .flash-hata { background: rgba(180, 35, 24, 0.12); color: #e05252; border: 1px solid rgba(180, 35, 24, 0.25); } /* ---------- Paylaşım ---------- */ .share-row { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; } .share-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 4px; } .share-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); color: var(--ink); transition: background .18s, transform .15s, color .18s, border-color .18s; } .share-btn:hover { transform: translateY(-1px); } .share-btn svg { width: 17px; height: 17px; } .s-x:hover { background: #000; border-color: #000; color: #fff; } .s-fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; } .s-wa:hover { background: #25d366; border-color: #25d366; color: #fff; } .s-tg:hover { background: #229ed9; border-color: #229ed9; color: #fff; } .s-li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; } /* ---------- Yorumlar ---------- */ .yorumlar { margin-top: 34px; } .yorum-baslik { font-size: 18px; font-weight: 700; } .yorum-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 10px; background: var(--card); } .yorum-ust { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted2); margin-bottom: 5px; } .yorum-ad { font-weight: 700; color: var(--ink); font-size: 13px; } .yorum-metin { font-size: 14px; color: var(--ink); } .yorum-form { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--card); } .yorum-form h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; } .yorum-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .yorum-form input, .yorum-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; font-family: inherit; } .yorum-form input:focus, .yorum-form textarea:focus { outline: none; border-color: var(--teal); } /* ---------- Duyarlılık ---------- */ @media (max-width: 980px) { .metrics { grid-template-columns: repeat(2, 1fr); } .op-grid, .ihbar-grid { grid-template-columns: repeat(2, 1fr); } .hero-inner { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 640px) { .nav-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .nav-links { flex-wrap: wrap; } .hero { padding: 48px 0 40px; } .metrics { grid-template-columns: 1fr 1fr; } .op-grid, .ihbar-grid { grid-template-columns: 1fr; } .op-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cta-band { padding: 30px 24px; } .section-head { flex-direction: column; align-items: flex-start; } .hd-gallery { grid-template-columns: 1fr; } .hd-photo-main { grid-column: span 1; } .hd-card { padding: 22px; } } /* ---------- Listeleme sayfaları ---------- */ .list-sayfa { padding-top: 24px; padding-bottom: 60px; } /* ---------- Tümünü Gör ---------- */ .tumunu-gor { display: flex; justify-content: flex-end; margin-top: 20px; } /* ---------- Sayfalama ---------- */ .sayfalama { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 32px; } .sayfa-btn { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .sayfa-btn:hover { background: var(--card-hover); } .sayfa-btn.aktif { background: var(--teal); border-color: var(--teal); color: #04221a; } /* ---------- Tıklanabilir kartlar ---------- */ a.op-card, a.ihbar-card { text-decoration: none; color: inherit; } a.ihbar-card { display: block; } /* ---------- Detay sayfaları ---------- */ .detay-sayfa { padding-top: 24px; padding-bottom: 60px; } .detay-card { border: 1px solid var(--line); border-radius: 22px; background: var(--card-grad); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 32px; } .detay-baslik { font-size: clamp(22px, 4vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin-top: 14px; } .detay-ozet { margin-top: 12px; font-size: 15.5px; color: var(--muted); line-height: 1.7; } .detay-meta { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .detay-meta .dm { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); } .detay-meta .dm .k { font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; } .detay-meta .dm .v { font-size: 14.5px; font-weight: 600; margin-top: 3px; } .detay-gallery { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .detay-photo { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); } .detay-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .detay-photo-main { grid-column: span 2; aspect-ratio: 16 / 9; } .detay-photo:not(.detay-photo-main) { aspect-ratio: 4 / 3; } .tur-badge { position: absolute; top: 12px; left: 12px; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; } .tur-once { background: #f3b23a; color: #231400; } .tur-sonra { background: #2bb673; color: #04231a; } /* Sayfa içeriği (zengin) */ .sayfa-icerik { margin-top: 22px; font-size: 15.5px; line-height: 1.85; color: var(--ink); } .sayfa-icerik h2 { font-size: 21px; margin: 22px 0 10px; } .sayfa-icerik h3 { font-size: 18px; margin: 18px 0 8px; } .sayfa-icerik p { margin: 0 0 12px; } .sayfa-icerik ul, .sayfa-icerik ol { margin: 0 0 12px 22px; } .sayfa-icerik a { color: var(--teal); } .sayfa-icerik img { max-width: 100%; border-radius: 12px; } .sayfa-icerik iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; } /* Haberler listesi + arşiv */ .hero-news-all { display: block; margin-top: 14px; padding: 10px; text-align: center; border: 1px solid var(--line2); border-radius: 10px; color: var(--ink); font-size: 13.5px; font-weight: 600; } .hero-news-all:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; } .filtre-bar { margin: 18px 0 4px; } .filtre-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .filtre-form label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } .filtre-form input[type="date"] { padding: 8px 10px; border: 1px solid var(--line2); border-radius: 9px; background: var(--card); color: var(--ink); font-size: 14px; font-family: inherit; } .arsiv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 22px; } .arsiv-etiket { font-size: 13px; font-weight: 700; color: var(--muted2); } .arsiv-chip { border: 1px solid var(--line2); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink); background: var(--card); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .arsiv-chip:hover, .arsiv-chip.aktif { border-color: var(--teal); background: var(--teal); color: #04221a; } .haber-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .haber-kart { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card-grad); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; } .haber-kart:hover { transform: translateY(-4px); border-color: var(--accent-ring); text-decoration: none; } .haber-kart-media { aspect-ratio: 16 / 9; background: var(--bg2); } .haber-kart-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .haber-kart-nophoto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted2); } .haber-kart-body { padding: 16px 18px 18px; flex: 1; } .haber-kart-date { font-size: 12px; color: var(--muted2); } .haber-kart-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; margin-top: 6px; } .haber-kart-ozet { font-size: 13px; color: var(--muted); margin-top: 6px; } @media (max-width: 800px) { .haber-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .haber-grid { grid-template-columns: 1fr; } } /* Yakıt özeti + rapor */ .yakit-ozet { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; } .yakit-kart { flex: 1; min-width: 130px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .yakit-label { font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; } .yakit-deger { font-size: 17px; font-weight: 700; } .yakit-alt { font-size: 11.5px; color: var(--muted); } .yakit-tumu { align-self: center; white-space: nowrap; } .rapor-sar { overflow-x: auto; } .rapor-tablo { width: 100%; border-collapse: collapse; } .rapor-tablo th, .rapor-tablo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; } .rapor-tablo th { font-size: 12px; color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .rapor-tablo td.num, .rapor-tablo th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Fotoğraf galerisi (açıklamalı) */ .galeri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; } .galeri-fig { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; } .galeri-fig img { width: 100%; height: 220px; object-fit: cover; display: block; } .galeri-fig-main { grid-column: span 2; } .galeri-fig-main img { height: 380px; } .foto-alt { padding: 11px 14px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); line-height: 1.5; } @media (max-width: 640px) { .galeri-grid { grid-template-columns: 1fr; } .galeri-fig-main { grid-column: span 1; } .galeri-fig-main img { height: 220px; } } @media (max-width: 640px) { .detay-gallery { grid-template-columns: 1fr; } .detay-photo-main { grid-column: span 1; } .detay-card { padding: 22px; } }