/* ============================================================ diyarbakr.com — redesign-home.css ANA SAYFA hero-altı dönüşümü (10 Haziran 2026) Kapsam: BÖLÜM / KAPSAYICI / DASHBOARD seviyesi. Tekil kart içleri (sec-place-card, ev, ...) BAŞKA katmanda. polish.css ve bundle CSS'ten SONRA yüklenmelidir; mevcut kurallar ezilmez, yalnızca kapsayıcı düzeyinde derinleştirilir. Ortak dil: turuncu #ea580c / #c2410c, tonlar #fff7ed/#ffedd5/ #fdba74; stone #1c1917/#57534e/#78716c; köşe 1.25rem & 999px; easing cubic-bezier(.22,.61,.36,1). ============================================================ */ /* ------------------------------------------------------------ 1. BOŞ BÖLÜM GİZLEME (kritik) İçerik kapsayıcıları (JSX'lerden doğrulandı): PlacesSection → .sec-grid EventsSection → .ev-list HistorySection → .timeline Geçici durumlar görünür kalır: .section-loading / .section-error Yalnızca .section-empty kalan bölümler (örn. Blog bandı, data.length === 0) tamamen gizlenir. Üst sarmalayıcı bant (div.bg-white / div.bg-stone-50\/60) da birlikte kapanır. :has desteklemeyen eski tarayıcılar kuralı yok sayar (güvenli). */ .portal-explore-wrap .sec:not(:has(.sec-grid, .ev-list, .timeline, .section-loading, .section-error)) { display: none; } .portal-explore-wrap > div:has(> .sec):not(:has(.sec-grid, .ev-list, .timeline, .section-loading, .section-error)) { display: none; } /* ------------------------------------------------------------ 2. DASHBOARD → ŞEHİR KONTROL PANELİ ------------------------------------------------------------ */ /* 2a. Zone: beyazdan sıcak tona inen degrade + üst kenarda geniş, yumuşak iç gölge → hero'dan ayrışan "panel" hissi. */ .portal-root .portal-dashboard-zone { background-color: #faf8f5; background-image: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%); box-shadow: inset 0 1px 0 rgba(231, 229, 228, 0.9), inset 0 26px 40px -32px rgba(28, 25, 23, 0.10); } /* 2b. Kartlar: ortak dinlenme gölgesi (tasarım dili) — polish'in degrade zemini ve hover'ı korunur, yalnızca derinlik eklenir. */ .portal-root .portal-dash-card { box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 12px 32px -16px rgba(28, 25, 23, 0.14); } /* Hover derinleşmesi korunur (polish §10 ile uyumlu, üstüne yazmaz) */ .portal-root .portal-dash-card:hover { box-shadow: 0 2px 4px rgba(28, 25, 23, 0.06), 0 18px 44px -18px rgba(28, 25, 23, 0.18); } /* 2c. Servis başlıkları: kategoriye özel renk şeritleri (emerald/ amber/orange) yerine TEK marka dili — üst-sol köşede yumuşak turuncu rozet + emoji ikon. */ .portal-dash-card .portal-dash-card-title.portal-service-title { display: inline-flex; align-items: center; gap: 0.55rem; background: #fff7ed; color: #9a3412; border: 1px solid #ffedd5; border-radius: 0.8rem; padding: 0.3rem 0.8rem 0.3rem 0.35rem; } .portal-dash-card .portal-service-title--pharmacy, .portal-dash-card .portal-service-title--taxi, .portal-dash-card .portal-service-title--bus { background: #fff7ed; color: #9a3412; } .portal-dash-card .portal-dash-card-title.portal-service-title::before { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.625rem; background: #ffedd5; font-size: 1.05rem; line-height: 1; } .portal-dash-card .portal-service-title--pharmacy::before { content: "💊"; } .portal-dash-card .portal-service-title--taxi::before { content: "🚕"; } .portal-dash-card .portal-service-title--bus::before { content: "🚌"; } /* 2d. Liste satırları: ince ayraçlar + hover zemini. Negatif margin ile hover dolgusu kart kenarına doğru nefes alır. */ .portal-dash-card .portal-list-row { border-bottom-color: #f5f5f4; padding-inline: 0.5rem; margin-inline: -0.5rem; border-radius: 0.625rem; transition: background-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1); } .portal-dash-card .portal-list-row:hover { background-color: #fafaf9; } /* 2e. Telefon / numara değerleri: hizalı rakamlar + marka turuncusu (taksi kartında numara .portal-btn-call içinde yazılıdır). */ .portal-dash-card .portal-btn-call { font-variant-numeric: tabular-nums; color: #c2410c; } /* 2f. "Tümünü gör" → turuncu kenarlı pill buton. */ .portal-dash-card .portal-dash-link { display: inline-flex; align-items: center; border: 1px solid #fdba74; border-radius: 999px; background: #ffffff; padding: 0.4rem 0.85rem; color: #c2410c; font-size: 10.5px; line-height: 1; transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .portal-dash-card .portal-dash-link:hover { background-color: #fff7ed; border-color: #fb923c; color: #9a3412; } /* ------------------------------------------------------------ 3. KEŞFET BAŞLIK ALANI — ortalanmış, büyütülmüş giriş ------------------------------------------------------------ */ .portal-explore-wrap .portal-explore-head { text-align: center; padding-block: 4.25rem 3.5rem; } .portal-explore-wrap .portal-explore-head .portal-overline { font-size: 0.75rem; } .portal-explore-wrap .portal-explore-head .portal-section-title { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.12; } /* Başlığın altında turuncu gradyan divider */ .portal-explore-wrap .portal-explore-head .portal-section-title::after { content: ""; display: block; width: 4rem; height: 3px; margin: 1.1rem auto 0; border-radius: 999px; background: linear-gradient(90deg, #ea580c, #fdba74); } /* Açıklama metni: ortalanmış, sınırlı genişlik */ .portal-explore-wrap .portal-explore-head p { margin-inline: auto; } /* ------------------------------------------------------------ 4. BÖLÜM BANTLARI RİTMİ ------------------------------------------------------------ */ /* 4a. Gri bantlar: sıcak ton + üst/alt ince iç çizgilerle "bant" hissi (CSS escape: bg-stone-50\/60). */ .portal-explore-wrap > .bg-stone-50\/60 { background-color: #faf8f5; box-shadow: inset 0 1px 0 rgba(231, 229, 228, 0.85), inset 0 -1px 0 rgba(231, 229, 228, 0.85); } /* 4b. "Tümünü Gör" → belirgin turuncu kenarlı pill (polish'teki kalkış/gölge hover'ı aynen korunur). */ .portal-explore-wrap .btn-view-all { border-color: #fdba74; color: #c2410c; background: #ffffff; } .portal-explore-wrap .btn-view-all:hover { border-color: #fb923c; background: #fff7ed; color: #9a3412; } /* ------------------------------------------------------------ 5. .SEC-GRID YOĞUNLUĞU + GENİŞ EKRAN ------------------------------------------------------------ */ .portal-root .portal-explore-wrap .sec-grid { gap: 1.25rem; } /* ≥1536px: keşfet bölümleri 80rem → 88rem; başlık bandı da aynı genişliğe taşınır ki alt çizgisi gridlerle hizalansın. */ @media (min-width: 1536px) { .portal-explore-wrap .sec, .portal-explore-wrap .portal-explore-head { max-width: 88rem; } } /* ------------------------------------------------------------ 6. QUICK-NAV — kart-tile hissi (polish v4 üzerine bir kademe) Transform (translateY) polish'ten gelir; burada yalnızca zemin ve ikon dolgusu derinleştirilir. ------------------------------------------------------------ */ .portal-quick-nav .portal-quick-nav-item:hover { background-color: #fff7ed; } .portal-quick-nav .portal-quick-nav-item:hover .portal-quick-nav-icon { background: #ea580c; border-color: #ea580c; color: #ffffff; } .portal-quick-nav .portal-quick-nav-item:hover .portal-quick-nav-label { color: #9a3412; } /* ------------------------------------------------------------ 7. MOBİL DENGE (≤640px) Dashboard zaten tek kolon — düzene dokunulmaz; yalnızca başlık alanının dikey ritmi sıkılaştırılır. ------------------------------------------------------------ */ @media (max-width: 640px) { .portal-explore-wrap .portal-explore-head { padding-block: 3rem 2.5rem; } .portal-dash-card .portal-list-row { padding-inline: 0.375rem; margin-inline: -0.375rem; } } /* ------------------------------------------------------------ 8. HAREKET AZALTMA (EN SONDA) ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .portal-dash-card .portal-list-row, .portal-dash-card .portal-dash-link, .portal-explore-wrap .btn-view-all, .portal-quick-nav .portal-quick-nav-item, .portal-quick-nav .portal-quick-nav-icon { transition-duration: 0.01ms !important; } }