/** * antalyamiz.com - Tema Katmani (Design System) / Akdeniz surumu * --------------------------------------------------------------------------- * AMAC * Sitenin tum gorsel dilini tek dosyada toplar. Eski assets/css/custom.css * yerine gecer; heniz yenilenmemis sayfalarin eski class isimleri icin de * "Legacy" bolumunde karsilik tanimlar. * * TASARIM YONU * Hedef: acilir acilmaz "kurumsal site" degil, KARAKTERLI BIR PORTAL * hissi vermek. * - Palet : Akdeniz mavisi -> turkuaz, sicak kum/mercan aksanlari * - Baslik : Fraunces (yumusak serif, opsz/SOFT/WONK eksenleri) * KALIN DEGIL - 400/500 agirlik, karakter one cikar * - Arayuz : Outfit 300-500 (hafif, geometrik) * - Yuzey : deniz camindan kartlar, asimetrik duzen, hareket * Duz beyaz kart + kalin sans basligi bilincli olarak TERK EDILDI. * * VERI AKISI (stil acisindan) * config/libraries.php -> bu dosyayi her sayfa grubunda icine basar * assets/js/ui.js -> slider/karusel/akilli arama bilesenlerini surer * assets/js/custom.js -> baslik, tema degistirme, acilir paneller * * BOLUMLER * 01 Tokenlar (acik) 07 Hero + akilli arama * 02 Tokenlar (koyu) 08 Slider / karusel (JS bilesenleri) * 03 Temel / reset 09 Icerik kartlari * 04 Tipografi 10 Ilce karuseli * 05 Yuzey & butonlar 11 Firma rehberi modulu * 06 Bolum basliklari 12 Konuk defteri slideri * 13 Baslik (header) & footer * 14 Legacy 15 Duyarli * =========================================================================== */ /* =========================================================================== 01 - TOKENLAR (ACIK TEMA) =========================================================================== */ :root { /* --- Deniz: ana renk ailesi --- */ --am-sea-900: #062A3D; --am-sea-800: #0A3B53; --am-sea-700: #0E5069; --am-sea-600: #14687F; /* --- Turkuaz: birincil aksan --- */ --am-teal-700: #0A7D7A; --am-teal-600: #0E9591; --am-teal-500: #12A8A0; /* birincil */ --am-teal-400: #2AC6B8; --am-aqua-300: #6FE3D5; --am-aqua-200: #A9F0E6; /* --- Sicak aksanlar: Antalya gunesi ve kumu --- */ --am-sand-400: #F0C27B; --am-sand-500: #E2A94F; --am-coral-500: #F2765A; /* ikincil CTA / vurgu */ --am-coral-600: #DE5C40; /* --- Durum --- */ --am-green-500: #2FA36B; --am-amber-500: #D9962A; --am-red-500: #D6455C; /* --- Yuzey ve metin --- */ --am-bg: #F1F8F9; /* buzlu deniz */ --am-bg-tint-a: rgba(18, 168, 160, .13); --am-bg-tint-b: rgba(14, 80, 105, .10); --am-surface: #FFFFFF; --am-surface-2: #E9F3F5; --am-ink: #0A2432; /* ana metin - derin deniz */ --am-ink-soft: #4A6672; --am-ink-faint: #7B929C; --am-line: rgba(10, 36, 50, .10); /* --- Deniz cami --- */ --am-glass-bg: rgba(255, 255, 255, .62); --am-glass-bg-2: rgba(255, 255, 255, .40); --am-glass-border: rgba(255, 255, 255, .72); --am-glass-blur: blur(18px) saturate(150%); /* --- Golge: deniz tonlu, yumusak --- */ --am-shadow-sm: 0 2px 10px rgba(10, 59, 83, .07); --am-shadow: 0 10px 30px rgba(10, 59, 83, .11); --am-shadow-lg: 0 22px 60px rgba(10, 59, 83, .18); /* --- Kose yaricaplari --- */ --am-r-sm: 10px; --am-r: 18px; --am-r-lg: 26px; --am-r-xl: 34px; --am-r-pill: 999px; /* --- Tipografi --- */ --am-font-display: "Fraunces", Georgia, "Times New Roman", serif; --am-font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --- Olcu --- */ --am-gutter: clamp(16px, 4.5vw, 56px); --am-max: 1340px; --am-t: 240ms cubic-bezier(.4, 0, .2, 1); /* --- Bootstrap 5.3 baglantisi --- */ --bs-body-bg: var(--am-bg); --bs-body-color: var(--am-ink); --bs-body-font-family: var(--am-font); --bs-border-color: var(--am-line); --bs-primary: var(--am-teal-500); --bs-link-color: var(--am-teal-700); --bs-link-hover-color: var(--am-sea-700); --bs-emphasis-color: var(--am-ink); --bs-secondary-color: var(--am-ink-soft); --bs-tertiary-bg: var(--am-surface-2); } /* =========================================================================== 02 - TOKENLAR (KOYU TEMA) (a) Tercih yoksa isletim sistemi ayari, (b) kullanici sectiyse data-bs-theme =========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --am-bg: #051A26; --am-bg-tint-a: rgba(18, 168, 160, .20); --am-bg-tint-b: rgba(14, 80, 105, .28); --am-surface: #0A2634; --am-surface-2: #0E3042; --am-ink: #E6F5F7; --am-ink-soft: #9FBCC6; --am-ink-faint: #6E8C97; --am-line: rgba(255, 255, 255, .12); --am-glass-bg: rgba(255, 255, 255, .07); --am-glass-bg-2: rgba(255, 255, 255, .04); --am-glass-border: rgba(255, 255, 255, .15); --am-shadow-sm: 0 2px 10px rgba(0, 0, 0, .40); --am-shadow: 0 10px 30px rgba(0, 0, 0, .50); --am-shadow-lg: 0 22px 60px rgba(0, 0, 0, .60); --bs-tertiary-bg: var(--am-surface-2); } } :root[data-bs-theme="dark"] { --am-bg: #051A26; --am-bg-tint-a: rgba(18, 168, 160, .20); --am-bg-tint-b: rgba(14, 80, 105, .28); --am-surface: #0A2634; --am-surface-2: #0E3042; --am-ink: #E6F5F7; --am-ink-soft: #9FBCC6; --am-ink-faint: #6E8C97; --am-line: rgba(255, 255, 255, .12); --am-glass-bg: rgba(255, 255, 255, .07); --am-glass-bg-2: rgba(255, 255, 255, .04); --am-glass-border: rgba(255, 255, 255, .15); --am-shadow-sm: 0 2px 10px rgba(0, 0, 0, .40); --am-shadow: 0 10px 30px rgba(0, 0, 0, .50); --am-shadow-lg: 0 22px 60px rgba(0, 0, 0, .60); --bs-tertiary-bg: var(--am-surface-2); } /* =========================================================================== 03 - TEMEL / RESET =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background-color: var(--am-bg); background-image: radial-gradient(1100px 560px at 8% -6%, var(--am-bg-tint-a), transparent 60%), radial-gradient(900px 480px at 96% 4%, var(--am-bg-tint-b), transparent 62%); background-attachment: fixed; color: var(--am-ink); font-family: var(--am-font); font-size: 16px; font-weight: 350; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; } ul { list-style: none; padding: 0; margin: 0; } a { color: var(--am-teal-700); text-decoration: none; transition: color var(--am-t); } a:hover { color: var(--am-sea-700); } button { font-family: inherit; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--am-teal-500); outline-offset: 3px; border-radius: 8px; } .am-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 10px 18px; border-radius: var(--am-r-pill); background: var(--am-teal-600); color: #fff; font-weight: 500; } .am-skip:focus { left: 16px; color: #fff; } .am-wrap { width: 100%; max-width: var(--am-max); margin-inline: auto; padding-inline: var(--am-gutter); } .am-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* =========================================================================== 04 - TIPOGRAFI Basliklar Fraunces. Kalinlik 400-500'de tutulur: karakteri agirliktan degil harf formundan gelsin diye. SOFT/WONK eksenleri harflere yumusak ve biraz "alisilmadik" bir tat verir - portal hissinin kaynagi budur. =========================================================================== */ h1, h2, h3, h4, .am-display { font-family: var(--am-font-display); font-weight: 500; font-variation-settings: "SOFT" 40, "WONK" 1; line-height: 1.12; letter-spacing: -.012em; color: var(--am-ink); margin: 0 0 .5em; } h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); font-weight: 400; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); } h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); } /* Baslik icinde italik vurgu - editoryal ton */ .am-em { font-style: italic; color: var(--am-teal-600); } h5, h6 { font-family: var(--am-font); font-weight: 500; } p { margin: 0 0 1em; color: var(--am-ink-soft); } .am-lead { font-size: clamp(1rem, .95rem + .35vw, 1.12rem); color: var(--am-ink-soft); font-weight: 300; } .am-muted { color: var(--am-ink-soft); } .am-faint { color: var(--am-ink-faint); } .am-tiny { font-size: .78rem; } .am-small { font-size: .875rem; } .am-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .am-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .am-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Bolum ustu kucuk etiket */ .am-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .55rem; font-family: var(--am-font); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--am-teal-600); } .am-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--am-teal-500), var(--am-aqua-300)); } /* =========================================================================== 05 - YUZEYLER & BUTONLAR =========================================================================== */ .am-glass { background: var(--am-glass-bg); -webkit-backdrop-filter: var(--am-glass-blur); backdrop-filter: var(--am-glass-blur); border: 1px solid var(--am-glass-border); border-radius: var(--am-r-lg); box-shadow: var(--am-shadow); } .am-card { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r-lg); box-shadow: var(--am-shadow-sm); transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-lift { transition: transform var(--am-t), box-shadow var(--am-t); } .am-lift:hover { transform: translateY(-4px); box-shadow: var(--am-shadow-lg); } .am-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.35rem; border: 1px solid transparent; border-radius: var(--am-r-pill); font-family: var(--am-font); font-weight: 500; font-size: .94rem; line-height: 1; cursor: pointer; white-space: nowrap; transition: transform var(--am-t), box-shadow var(--am-t), background var(--am-t), color var(--am-t), border-color var(--am-t); } .am-btn:active { transform: translateY(1px); } .am-btn-primary { background: linear-gradient(135deg, var(--am-teal-400), var(--am-teal-600)); color: #fff; box-shadow: 0 8px 22px rgba(18, 168, 160, .34); } .am-btn-primary:hover { color: #fff; box-shadow: 0 12px 30px rgba(18, 168, 160, .46); } .am-btn-warm { background: linear-gradient(135deg, var(--am-sand-400), var(--am-coral-500)); color: #fff; box-shadow: 0 8px 22px rgba(242, 118, 90, .30); } .am-btn-warm:hover { color: #fff; box-shadow: 0 12px 30px rgba(242, 118, 90, .42); } .am-btn-ghost { background: var(--am-glass-bg); -webkit-backdrop-filter: var(--am-glass-blur); backdrop-filter: var(--am-glass-blur); border-color: var(--am-glass-border); color: var(--am-ink); } .am-btn-ghost:hover { background: var(--am-surface); color: var(--am-teal-700); } .am-btn-outline { background: transparent; border-color: var(--am-line); color: var(--am-ink); } .am-btn-outline:hover { border-color: var(--am-teal-500); color: var(--am-teal-700); } .am-btn-sm { padding: .5rem 1rem; font-size: .84rem; } .am-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .9rem; border-radius: var(--am-r-pill); background: var(--am-surface); border: 1px solid var(--am-line); color: var(--am-ink); font-size: .84rem; font-weight: 400; transition: transform var(--am-t), background var(--am-t), color var(--am-t), border-color var(--am-t); } .am-chip:hover { transform: translateY(-2px); border-color: var(--am-teal-400); color: var(--am-teal-700); } .am-chip-count { font-size: .72rem; color: var(--am-ink-faint); } .am-chip:hover .am-chip-count { color: var(--am-teal-600); } .am-badge { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; gap: .35rem; padding: .22rem .62rem; border-radius: var(--am-r-pill); font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .am-badge-teal { background: rgba(18, 168, 160, .16); color: var(--am-teal-700); } .am-badge-sand { background: rgba(226, 169, 79, .20); color: #9A6B14; } .am-badge-coral { background: rgba(242, 118, 90, .18); color: var(--am-coral-600); } :root[data-bs-theme="dark"] .am-badge-teal, :root[data-bs-theme="dark"] .am-badge-sand, :root[data-bs-theme="dark"] .am-badge-coral { color: #fff; } .am-input { width: 100%; padding: .8rem 1.05rem; border: 1px solid var(--am-line); border-radius: var(--am-r-pill); background: var(--am-surface); color: var(--am-ink); font-family: var(--am-font); font-size: .95rem; font-weight: 350; transition: border-color var(--am-t), box-shadow var(--am-t); } .am-input::placeholder { color: var(--am-ink-faint); } .am-input:focus { outline: none; border-color: var(--am-teal-400); box-shadow: 0 0 0 4px rgba(18, 168, 160, .16); } /* =========================================================================== 06 - BOLUM BASLIKLARI / IZGARALAR =========================================================================== */ .am-section { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); } .am-section-tight { padding-block: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); } .am-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .am-section-head h2 { margin: 0; } .am-section-sub { margin: .4rem 0 0; color: var(--am-ink-soft); font-size: .95rem; font-weight: 300; } .am-grid { display: grid; gap: clamp(1rem, .6rem + 1vw, 1.4rem); } .am-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .am-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .am-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .am-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1199.98px) { .am-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .am-cols-4, .am-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .am-cols-6, .am-cols-4, .am-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .am-cols-6, .am-cols-4, .am-cols-3, .am-cols-2 { grid-template-columns: 1fr; } } /* =========================================================================== 07 - HERO + AKILLI ARAMA Hero artik ekrani KAPLAMAZ: kompakt bir deniz bandidir. Isin merkezinde arama kutusu vardir; sekmeler ve canli oneriler assets/js/ui.js icindeki AmSmartSearch bileseni tarafindan surulur. =========================================================================== */ .am-hero { position: relative; /* isolation: hero icindeki negatif z-index'li sahne katmanlarinin sayfa zemininin ARKASINA dusmemesi icin gerekli. z-index: hero kendi yiginini olusturdugu icin, arama onerileri gibi tasan ogeler sonraki bolumlerin altinda kalmasin diye. */ isolation: isolate; z-index: 3; padding-block: clamp(2.2rem, 1.2rem + 4vw, 3.4rem); padding-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); /* overflow GIZLENMEZ: arama oneri listesi hero'nun disina tasabilmeli. Sahne katmanlarinin tasmasi .am-stage icinde kirpilir. */ } /* Altyazi ve arama, icerik kabiyla ayni hizada dursun */ .am-hero .am-wrap { position: relative; } /* --- Sahne: birbirine gecen manzara katmanlari (ui.js -> AmStage) --- Her slayt kendi
'inde durur; gecis sirasinda eski katman soner, yeni katman acilirken yavasca yakinlasir/kayar (Ken Burns). Boylece arka plan sabit bir siluet degil, Antalya'nin donen vitrini olur. */ .am-stage { position: absolute; inset: 0; z-index: -3; overflow: hidden; } .am-stage-layer { position: absolute; inset: -34px; background-size: cover; background-position: center 58%; opacity: 0; transform: scale(1.04); transition: opacity 1400ms ease; will-change: opacity, transform; } .am-stage-layer.is-on { opacity: 1; animation: am-kenburns 16s ease-out forwards; } @keyframes am-kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); } } /* Hareket azaltma tercihi: gorsel yine degisir ama zoom/kayma olmaz */ @media (prefers-reduced-motion: reduce) { .am-stage-layer.is-on { animation: none; transform: scale(1.04); } } /* Deniz katmani: derin maviden turkuaza */ .am-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(118deg, rgba(6, 42, 61, .90) 0%, rgba(14, 80, 105, .82) 42%, rgba(18, 168, 160, .72) 100%); } /* Alt kenarda govdeye gecis */ .am-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; background: linear-gradient(to bottom, transparent, var(--am-bg)); } .am-hero-inner { position: relative; max-width: 940px; margin-inline: auto; text-align: center; } .am-hero h1 { color: #fff; margin-bottom: .25rem; text-shadow: 0 2px 26px rgba(0, 0, 0, .28); } .am-hero h1 .am-em { color: var(--am-aqua-300); } .am-hero .am-lead { color: rgba(255, 255, 255, .90); max-width: 560px; margin: 0 auto; } /* --- Akilli arama --- */ .am-search { position: relative; margin: 1.5rem auto 0; max-width: 720px; text-align: left; } /* Sekmeler: aramanin nerede yapilacagini secer */ .am-search-tabs { display: flex; gap: .3rem; justify-content: center; margin-bottom: .6rem; } .am-search-tab { padding: .38rem .9rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--am-r-pill); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .92); font-size: .8rem; font-weight: 400; cursor: pointer; transition: background var(--am-t), color var(--am-t), border-color var(--am-t); } .am-search-tab:hover { background: rgba(255, 255, 255, .24); } .am-search-tab.is-active { background: #fff; color: var(--am-sea-800); border-color: #fff; font-weight: 500; } /* Kutu */ .am-search-box { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem 1.15rem; background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--am-r-pill); box-shadow: 0 18px 44px rgba(6, 42, 61, .28); } .am-search-box > i { color: var(--am-teal-600); font-size: 1.05rem; } .am-search-box input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: .7rem 0; font-family: var(--am-font); font-size: 1rem; font-weight: 350; color: var(--am-ink); } .am-search-box input::placeholder { color: var(--am-ink-faint); } /* Canli oneri listesi */ .am-suggest { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 60; padding: .45rem; background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r); box-shadow: var(--am-shadow-lg); max-height: 340px; overflow-y: auto; display: none; } .am-suggest.is-open { display: block; } .am-suggest-group { padding: .5rem .75rem .25rem; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--am-ink-faint); } .am-suggest-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--am-r-sm); color: var(--am-ink); font-size: .9rem; cursor: pointer; } .am-suggest-item i { color: var(--am-teal-500); font-size: .95rem; } .am-suggest-item small { margin-left: auto; color: var(--am-ink-faint); font-size: .75rem; } .am-suggest-item:hover, .am-suggest-item.is-cursor { background: var(--am-surface-2); color: var(--am-teal-700); } .am-suggest-empty { padding: .9rem .75rem; color: var(--am-ink-faint); font-size: .88rem; } /* --- Sahne altyazisi: o an gorunen yerin adi, yazisina baglantili --- Hero'yu dekoratif olmaktan cikarip gezinilebilir bir vitrine cevirir. */ /* Akista durur (mutlak konumlandirilmaz): boylece hero'nun yuksekligi icerige gore kendiliginden ayarlanir ve altyazi her ekranda arama satirinin altinda, icerik kabiyla ayni hizada kalir. */ .am-stage-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); } .am-stage-link { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem .45rem .6rem; border-radius: var(--am-r-pill); background: rgba(6, 42, 61, .48); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: .84rem; transition: background var(--am-t), transform var(--am-t); } .am-stage-link:hover { background: rgba(6, 42, 61, .72); color: #fff; transform: translateY(-2px); } .am-stage-pin { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: linear-gradient(135deg, var(--am-teal-400), var(--am-teal-600)); font-size: .8rem; } .am-stage-place { font-weight: 500; } .am-stage-sep { opacity: .5; } .am-stage-go { opacity: .8; } /* Ilerleme cubuklari: kac slayt var, hangisindeyiz, ne kadar kaldi */ .am-stage-bars { display: flex; gap: .3rem; align-items: center; } .am-stage-bar { width: 26px; height: 3px; padding: 0; border: none; border-radius: 2px; background: rgba(255, 255, 255, .3); cursor: pointer; overflow: hidden; transition: width var(--am-t), background var(--am-t); } .am-stage-bar:hover { background: rgba(255, 255, 255, .55); } .am-stage-bar.is-on { width: 52px; background: rgba(255, 255, 255, .28); } .am-stage-bar span { display: block; height: 100%; width: 0; background: var(--am-aqua-300); border-radius: 2px; } .am-stage-bar.is-on span { animation: am-bar 7s linear forwards; } @keyframes am-bar { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .am-stage-bar.is-on span { animation: none; width: 100%; } } /* Populer aramalar */ .am-search-hot { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: .85rem; } .am-search-hot span { color: rgba(255, 255, 255, .7); font-size: .78rem; align-self: center; } .am-search-hot button { padding: .3rem .75rem; border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--am-r-pill); background: rgba(255, 255, 255, .10); color: #fff; font-size: .78rem; cursor: pointer; transition: background var(--am-t); } .am-search-hot button:hover { background: rgba(255, 255, 255, .26); } /* =========================================================================== 08 - SLIDER / KARUSEL (assets/js/ui.js ile calisir) =========================================================================== */ /* --- Kaydirmali ray: ilceler, firmalar gibi uzun listeler --- */ .am-rail-wrap { position: relative; } .am-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(216px, 1fr); gap: clamp(.8rem, .5rem + .8vw, 1.2rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; /* kaydirma cubugunu gizle - gezinme oklarla yapilir */ scrollbar-width: none; } .am-rail::-webkit-scrollbar { display: none; } .am-rail > * { scroll-snap-align: start; } /* Ray oklari */ .am-rail-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--am-line); border-radius: 50%; background: var(--am-surface); color: var(--am-ink); box-shadow: var(--am-shadow); cursor: pointer; transition: opacity var(--am-t), background var(--am-t), color var(--am-t); } .am-rail-nav:hover { background: var(--am-teal-500); color: #fff; border-color: var(--am-teal-500); } .am-rail-nav[disabled] { opacity: 0; pointer-events: none; } .am-rail-prev { left: -12px; } .am-rail-next { right: -12px; } @media (max-width: 767.98px) { .am-rail-nav { display: none; } } /* --- Solma slideri: one cikan yazilar, konuk defteri --- */ .am-slider { position: relative; } .am-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 520ms ease, transform 520ms ease; transform: scale(1.02); } .am-slide.is-active { position: relative; opacity: 1; visibility: visible; transform: none; } /* Noktalar */ .am-dots { display: flex; gap: .4rem; align-items: center; } .am-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--am-r-pill); background: var(--am-line); cursor: pointer; transition: width var(--am-t), background var(--am-t); } .am-dot.is-active { width: 26px; background: var(--am-teal-500); } /* Slider alt kontrol satiri */ .am-slider-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .am-slider-arrows { display: flex; gap: .4rem; } .am-arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--am-line); border-radius: 50%; background: transparent; color: var(--am-ink); cursor: pointer; transition: background var(--am-t), color var(--am-t), border-color var(--am-t); } .am-arrow:hover { background: var(--am-teal-500); color: #fff; border-color: var(--am-teal-500); } /* =========================================================================== 09 - ICERIK KARTLARI =========================================================================== */ /* --- Vitrin slaytı (buyuk, gorsel uzerine yazi) --- */ .am-feature { position: relative; display: block; min-height: 460px; border-radius: var(--am-r-lg); overflow: hidden; color: #fff; isolation: isolate; box-shadow: var(--am-shadow); } .am-feature img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); } .am-feature:hover img { transform: scale(1.05); } .am-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(5, 26, 38, .94) 0%, rgba(5, 26, 38, .55) 40%, rgba(5, 26, 38, .06) 100%); } .am-feature-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 1rem + 1.4vw, 2rem); display: flex; flex-direction: column; gap: .55rem; } .am-feature h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); color: #fff; margin: 0; } .am-feature:hover h3 { color: var(--am-aqua-200); } .am-feature p { color: rgba(255, 255, 255, .84); margin: 0; font-size: .94rem; } /* --- Yazi karti: liste sayfalarinin temel tasi --- Icindeki ogeler
veya olabilir; kartin tamami tek bir oldugu icin ic ogeler span olarak yazilir ve display kurallari burada verilir. Boylece HTML gecerli kalir (a > div ic ice sorunu olmaz). */ .am-post { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--am-r-lg); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); color: var(--am-ink); height: 100%; transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-post:hover { color: var(--am-ink); border-color: var(--am-teal-400); } .am-post-media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--am-surface-2); } .am-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.4, 0, .2, 1); } .am-post:hover .am-post-media img { transform: scale(1.06); } .am-post-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.2rem; flex: 1; } .am-post-title { display: block; font-family: var(--am-font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.01em; color: var(--am-ink); transition: color var(--am-t); } .am-post:hover .am-post-title { color: var(--am-teal-700); } .am-post-spot { display: block; font-size: .88rem; color: var(--am-ink-soft); } .am-post-meta { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .5rem; font-size: .76rem; color: var(--am-ink-faint); } .am-post-meta i { color: var(--am-teal-500); } /* --- Yan liste: vitrinin yanindaki diger yazilar --- */ .am-sidelist { display: flex; flex-direction: column; gap: .35rem; } .am-sideitem { display: flex; align-items: center; gap: .85rem; padding: .6rem; border-radius: var(--am-r); color: var(--am-ink); transition: background var(--am-t), transform var(--am-t); } .am-sideitem:hover { background: var(--am-surface); transform: translateX(3px); color: var(--am-teal-700); } .am-sideitem.is-current { background: var(--am-surface); box-shadow: var(--am-shadow-sm); } .am-sideitem-img { flex: 0 0 62px; width: 62px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--am-surface-2); } .am-sideitem-img img { width: 100%; height: 100%; object-fit: cover; } .am-sideitem-txt { font-size: .88rem; line-height: 1.35; } .am-sideitem-cat { display: block; font-size: .7rem; color: var(--am-ink-faint); letter-spacing: .06em; text-transform: uppercase; } /* --- Tema kartlari (gezilecek yerler, antik kent...) --- */ .am-theme { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 132px; padding: 1rem; border-radius: var(--am-r); overflow: hidden; background: linear-gradient(150deg, var(--am-sea-700), var(--am-teal-600)); color: #fff; transition: transform var(--am-t), box-shadow var(--am-t); } .am-theme:nth-child(2n) { background: linear-gradient(150deg, var(--am-teal-600), var(--am-aqua-300)); } .am-theme:nth-child(3n) { background: linear-gradient(150deg, var(--am-sea-800), var(--am-teal-500)); } .am-theme:nth-child(4n) { background: linear-gradient(150deg, var(--am-teal-700), var(--am-sand-400)); } .am-theme:hover { transform: translateY(-4px); box-shadow: var(--am-shadow-lg); color: #fff; } .am-theme i { position: absolute; top: -6px; right: -6px; font-size: 4.2rem; opacity: .18; line-height: 1; } .am-theme span { font-weight: 500; font-size: .98rem; position: relative; } /* =========================================================================== 10 - ILCE KARUSELI =========================================================================== */ .am-place { position: relative; display: flex; align-items: flex-end; min-height: 240px; padding: 1rem; border-radius: var(--am-r-lg); overflow: hidden; color: #fff; isolation: isolate; box-shadow: var(--am-shadow-sm); } .am-place img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.4, 0, .2, 1); } .am-place:hover img { transform: scale(1.07); } .am-place::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(5, 26, 38, .88), rgba(5, 26, 38, .10) 62%); transition: background var(--am-t); } .am-place:hover::after { background: linear-gradient(to top, rgba(10, 125, 122, .90), rgba(18, 168, 160, .18) 62%); } .am-place-body { position: relative; } .am-place-name { display: block; font-family: var(--am-font-display); font-weight: 500; font-size: 1.15rem; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); } .am-place-meta { font-size: .76rem; color: rgba(255, 255, 255, .8); } /* =========================================================================== 11 - FIRMA REHBERI MODULU Portalin en onemli modulu: aramasi ve kategorileri one cikar. =========================================================================== */ .am-directory { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: var(--am-r-xl); background: linear-gradient(140deg, rgba(18, 168, 160, .12), rgba(14, 80, 105, .10)), var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); overflow: hidden; } /* Dekoratif dalga */ .am-directory::before { content: ""; position: absolute; right: -80px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(111, 227, 213, .38), transparent 68%); pointer-events: none; } .am-directory-search { display: flex; gap: .5rem; max-width: 620px; } .am-directory-search .am-input { background: var(--am-surface); } .am-directory-cats { display: flex; flex-wrap: wrap; gap: .45rem; } /* Firma karti */ .am-firm { display: flex; align-items: center; gap: .85rem; padding: .75rem .85rem; border-radius: var(--am-r); background: var(--am-surface); border: 1px solid var(--am-line); color: var(--am-ink); transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-firm:hover { transform: translateY(-3px); box-shadow: var(--am-shadow); border-color: var(--am-teal-400); color: var(--am-teal-700); } .am-firm-logo { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--am-line); overflow: hidden; } .am-firm-logo img { width: 100%; height: 100%; object-fit: scale-down; padding: 4px; } .am-firm-name { font-size: .86rem; font-weight: 400; line-height: 1.35; } /* =========================================================================== 12 - KONUK DEFTERI SLIDERI Yorum listesi gibi degil: tek bir mesajin donduğu, kendine ait tarzi olan bir deniz paneli. =========================================================================== */ .am-guest { position: relative; padding: clamp(1.6rem, 1.2rem + 2.5vw, 3rem); border-radius: var(--am-r-xl); background: linear-gradient(135deg, var(--am-sea-800), var(--am-teal-700)); color: #fff; overflow: hidden; isolation: isolate; } /* Dalga dokusu */ .am-guest::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 260px at 88% 10%, rgba(111, 227, 213, .26), transparent 65%), radial-gradient(420px 220px at 6% 96%, rgba(240, 194, 123, .18), transparent 62%); } .am-guest-quote { /* Panel overflow:hidden oldugu icin tamamen disari tasarsa kirpilir; ustten hafifce iceride konumlandirilir. */ position: absolute; top: -.18em; left: .2rem; font-family: var(--am-font-display); font-size: clamp(7rem, 4rem + 12vw, 13rem); line-height: 1; color: rgba(255, 255, 255, .09); pointer-events: none; user-select: none; } .am-guest-body { position: relative; min-height: 190px; } .am-guest-text { font-family: var(--am-font-display); font-weight: 400; font-style: italic; font-size: clamp(1.1rem, .95rem + 1vw, 1.6rem); line-height: 1.5; color: #fff; margin: 0 0 1.1rem; max-width: 52ch; } .am-guest-who { display: flex; align-items: center; gap: .7rem; } .am-guest-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-family: var(--am-font-display); font-size: 1rem; color: #fff; } .am-guest-name { font-weight: 500; font-size: .94rem; color: #fff; } .am-guest-date { font-size: .78rem; color: rgba(255, 255, 255, .66); } .am-guest .am-dot { background: rgba(255, 255, 255, .28); } .am-guest .am-dot.is-active { background: var(--am-aqua-300); } .am-guest .am-arrow { border-color: rgba(255, 255, 255, .3); color: #fff; } .am-guest .am-arrow:hover { background: #fff; color: var(--am-sea-800); border-color: #fff; } /* =========================================================================== 13 - BASLIK (HEADER) & FOOTER Baslik HER ZAMAN okunakli: hero uzerinde bile koyu deniz cami zemini vardir. (Onceki surumde seffaf baslayip beyaz yaziyla kayboluyordu.) =========================================================================== */ .am-header { position: sticky; top: 0; z-index: 1030; background: rgba(6, 42, 61, .72); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, .10); transition: background var(--am-t), box-shadow var(--am-t); } .am-header.am-stuck { background: rgba(6, 42, 61, .92); box-shadow: 0 6px 24px rgba(6, 42, 61, .28); } /* Kaydirinca bar incelir: sayfaya daha cok yer kalir, hareket hissi verir */ .am-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; transition: min-height var(--am-t); } .am-header.am-stuck .am-header-inner { min-height: 58px; } .am-brand { display: inline-flex; align-items: center; flex: 0 0 auto; } /* Logo koyu bir PNG; koyu deniz bari uzerinde daima beyaza cevrilir. */ .am-brand img { height: 34px; width: auto; filter: brightness(0) invert(1); transition: height var(--am-t); } .am-header.am-stuck .am-brand img { height: 28px; } .am-nav { display: flex; align-items: center; gap: .1rem; margin-inline: auto; } /* Menu baglantisi: dolgu/hap YOK. Kurumsal his buradan geliyordu; yerine altta ortadan disa CIZILEN turkuaz bir cizgi ve ustte kucuk bir nokta kullanilir. */ .am-nav-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem; color: rgba(255, 255, 255, .78); font-weight: 350; font-size: .92rem; letter-spacing: .01em; transition: color var(--am-t); } .am-nav-link i { font-size: .95rem; opacity: .7; transition: opacity var(--am-t), transform var(--am-t); } /* Cizgi: transform ile buyutulur, boylece yeniden yerlesim (reflow) olmaz */ .am-nav-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .28rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--am-teal-400), var(--am-aqua-300)); transform: scaleX(0); transform-origin: center; transition: transform 260ms cubic-bezier(.4, 0, .2, 1); } .am-nav-link:hover { color: #fff; } .am-nav-link:hover i { opacity: 1; transform: translateY(-1px); } .am-nav-link:hover::after { transform: scaleX(1); } .am-nav-link.is-active { color: #fff; font-weight: 400; } .am-nav-link.is-active i { opacity: 1; color: var(--am-aqua-300); } .am-nav-link.is-active::after { transform: scaleX(1); } /* Okuma ilerlemesi: barin altinda ince turkuaz cizgi (custom.js surer) */ .am-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--am-teal-500), var(--am-aqua-300)); transition: width 90ms linear; pointer-events: none; } .am-header-actions { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; } .am-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .9); font-size: 1.05rem; cursor: pointer; transition: background var(--am-t), color var(--am-t); } .am-icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; } .am-theme-toggle .bi-sun-fill { display: none; } :root[data-bs-theme="dark"] .am-theme-toggle .bi-sun-fill { display: block; } :root[data-bs-theme="dark"] .am-theme-toggle .bi-moon-stars-fill { display: none; } .am-burger { display: none; } .am-mobile-panel { display: none; flex-direction: column; gap: .2rem; padding: 1rem var(--am-gutter) 1.4rem; background: rgba(6, 42, 61, .97); border-top: 1px solid rgba(255, 255, 255, .10); } .am-mobile-panel.is-open { display: flex; } .am-mobile-panel .am-input { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; } .am-mobile-panel .am-input::placeholder { color: rgba(255, 255, 255, .6); } .am-mobile-panel hr { border-color: rgba(255, 255, 255, .14); } .am-pop-wrap { position: relative; } .am-pop { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; padding: 1.05rem; background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r); box-shadow: var(--am-shadow-lg); display: none; z-index: 1040; } .am-pop.is-open { display: block; } .am-pop a { display: block; padding: .45rem .2rem; color: var(--am-ink); font-size: .9rem; } .am-pop a:hover { color: var(--am-teal-700); } /* --- Footer --- */ .am-footer { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); background: var(--am-surface); border-top: 1px solid var(--am-line); } .am-footer h5 { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--am-ink-faint); margin-bottom: .9rem; font-weight: 500; } .am-footer a { display: block; padding: .28rem 0; color: var(--am-ink-soft); font-size: .88rem; } .am-footer a:hover { color: var(--am-teal-700); } .am-footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .am-footer .am-brand img { filter: none; } :root[data-bs-theme="dark"] .am-footer .am-brand img { filter: brightness(0) invert(1); } .am-footer-bottom { margin-top: 2.5rem; padding-block: 1.25rem; border-top: 1px solid var(--am-line); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: .84rem; color: var(--am-ink-faint); } .am-social { display: flex; gap: .4rem; } .am-social a { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--am-surface-2); color: var(--am-ink-soft); } .am-social a:hover { background: var(--am-teal-500); color: #fff; } /* =========================================================================== 13b - IC SAYFALAR antalya.php (ilce rehberi), county.php (ilce/tema listesi), antalya-detail.php (yazi detayi) tarafindan kullanilir. =========================================================================== */ /* --- Sayfa basligi bandi: hero'nun sakin kardesi --- Anasayfadaki donen sahne yerine tek bir sabit gorsel veya duz deniz gecisi kullanir; ic sayfalarda dikkat iceride olmali. */ .am-pagehead { position: relative; isolation: isolate; padding-block: clamp(1.8rem, 1.2rem + 3vw, 3.2rem); overflow: hidden; color: #fff; } .am-pagehead-photo { position: absolute; inset: -20px; z-index: -3; background-size: cover; background-position: center 58%; filter: blur(1px) saturate(115%); transform: scale(1.04); } .am-pagehead::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(118deg, rgba(6, 42, 61, .92) 0%, rgba(14, 80, 105, .84) 45%, rgba(18, 168, 160, .74) 100%); } .am-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: -1; background: linear-gradient(to bottom, transparent, var(--am-bg)); } .am-pagehead h1 { color: #fff; margin-bottom: .3rem; } .am-pagehead h1 .am-em { color: var(--am-aqua-300); } .am-pagehead .am-lead { color: rgba(255, 255, 255, .88); max-width: 70ch; } .am-pagehead .am-eyebrow { color: var(--am-aqua-300); } .am-pagehead .am-eyebrow::before { background: linear-gradient(90deg, var(--am-aqua-300), transparent); } /* --- Kirinti yolu (breadcrumb) --- */ .am-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .9rem; font-size: .82rem; } .am-crumbs a { color: rgba(255, 255, 255, .78); } .am-crumbs a:hover { color: #fff; text-decoration: underline; } .am-crumbs .am-crumb-sep { opacity: .45; } .am-crumbs [aria-current] { color: #fff; } /* Acik zeminde kullanildiginda (gorselsiz sayfalar) */ .am-crumbs-dark a { color: var(--am-ink-soft); } .am-crumbs-dark a:hover { color: var(--am-teal-700); } .am-crumbs-dark [aria-current] { color: var(--am-ink); } /* --- Yazi govdesi: okunabilirlik oncelikli tipografi --- */ .am-article { font-size: 1.06rem; line-height: 1.85; color: var(--am-ink-soft); max-width: 72ch; } .am-article p { margin: 0 0 1.15em; } .am-article a { text-decoration: underline; text-underline-offset: 3px; } .am-article h2, .am-article h3 { color: var(--am-ink); margin-top: 1.6em; } .am-article img { border-radius: var(--am-r); margin-block: 1rem; } .am-article ul, .am-article ol { margin: 0 0 1.15em 1.2em; list-style: revert; } .am-article li { margin-bottom: .4em; } /* Ilk paragrafi one cikar: dergilerdeki giris paragrafi etkisi */ .am-article > p:first-of-type { font-size: 1.14rem; color: var(--am-ink); } /* Yazinin yanindaki gorsel */ .am-article-figure { float: right; width: min(46%, 420px); margin: .3rem 0 1.2rem 1.6rem; border-radius: var(--am-r-lg); overflow: hidden; box-shadow: var(--am-shadow); } .am-article-figure img { width: 100%; display: block; border-radius: 0; margin: 0; } @media (max-width: 767.98px) { .am-article-figure { float: none; width: 100%; margin: 0 0 1.2rem; } } /* --- Yazi kunyesi --- */ .am-meta { display: flex; flex-wrap: wrap; gap: .5rem .35rem; padding: .9rem 1.1rem; border-radius: var(--am-r); background: var(--am-surface-2); font-size: .84rem; color: var(--am-ink-soft); } .am-meta span { display: inline-flex; align-items: center; gap: .4rem; } .am-meta span + span::before { content: "·"; margin-right: .35rem; opacity: .5; } .am-meta i { color: var(--am-teal-600); } /* --- Yorumlar --- */ .am-comment { display: flex; gap: .9rem; padding: 1rem 0; border-top: 1px solid var(--am-line); } .am-comment:first-child { border-top: 0; } .am-comment-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--am-teal-400), var(--am-sea-600)); color: #fff; font-family: var(--am-font-display); font-size: 1rem; } .am-comment-name { font-weight: 500; font-size: .92rem; color: var(--am-ink); } .am-comment-date { font-size: .76rem; color: var(--am-ink-faint); } .am-comment p { margin: .35rem 0 0; font-size: .94rem; } /* --- Sayfalama --- */ .am-pager { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; } /* Sayfalama baglantilari model tarafinda uretildigi icin (paging.link) Bootstrap sinifiyla geliyorlar; tema gorunumune burada baglanirlar. */ .am-pager .btn-outline-secondary, .am-pager .btn-success, .am-pager span.btn, .am-pager a.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .85rem; border-radius: var(--am-r-pill); border: 1px solid var(--am-line); background: var(--am-surface); color: var(--am-ink) !important; font-size: .9rem; font-weight: 400; transition: background var(--am-t), color var(--am-t), border-color var(--am-t); } .am-pager .btn-outline-secondary:hover, .am-pager a.btn:hover { border-color: var(--am-teal-400); color: var(--am-teal-700) !important; } .am-pager .btn-success, .am-pager span.btn { background: linear-gradient(135deg, var(--am-teal-400), var(--am-teal-600)); border-color: transparent; color: #fff !important; } /* --- Bos durum --- */ .am-empty { text-align: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1rem; border: 1px dashed var(--am-line); border-radius: var(--am-r-lg); color: var(--am-ink-soft); } .am-empty i { font-size: 2.2rem; color: var(--am-teal-400); display: block; margin-bottom: .6rem; } /* --- Harita cercevesi --- */ .am-map { width: 100%; height: 340px; border: 0; border-radius: var(--am-r-lg); box-shadow: var(--am-shadow-sm); } /* --- Yan sutun kutusu --- */ .am-aside { position: sticky; top: 92px; padding: 1.2rem; border-radius: var(--am-r-lg); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); } .am-aside h3 { font-size: 1.05rem; margin-bottom: .9rem; } @media (max-width: 991.98px) { .am-aside { position: static; } } /* Icerik + yan sutun duzeni */ .am-with-aside { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } @media (max-width: 991.98px) { .am-with-aside { grid-template-columns: 1fr; } } /* --- Form alanlari (yorum formu vb.) --- */ .am-field { width: 100%; padding: .75rem 1rem; border: 1px solid var(--am-line); border-radius: var(--am-r-sm); background: var(--am-surface); color: var(--am-ink); font-family: var(--am-font); font-size: .95rem; font-weight: 350; transition: border-color var(--am-t), box-shadow var(--am-t); } .am-field:focus { outline: none; border-color: var(--am-teal-400); box-shadow: 0 0 0 4px rgba(18, 168, 160, .14); } textarea.am-field { min-height: 110px; resize: vertical; } .am-form-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .am-form-grid > .am-col-full { grid-column: 1 / -1; } @media (max-width: 575.98px) { .am-form-grid { grid-template-columns: 1fr; } } /* =========================================================================== 14 - LEGACY Heniz yenilenmemis view'lardaki eski class karsiliklari. Sayfalar tek tek elden gecirildikce bu bolum kuculecektir. =========================================================================== */ .container-fluid { width: 100%; max-width: var(--am-max); margin-inline: auto; padding-inline: var(--am-gutter); } .font-sm { font-size: .875rem; } .text-shadow { text-shadow: 0 2px 8px rgba(0, 0, 0, .45); } .btn-green, .btn-white, .btn-light, .btn-gray { border: none; border-radius: var(--am-r-pill); padding: .6rem 1.2rem; font-weight: 500; cursor: pointer; transition: background var(--am-t), color var(--am-t); } .btn-green { background: linear-gradient(135deg, var(--am-teal-400), var(--am-teal-600)); color: #fff !important; } .btn-white, .btn-light { background: var(--am-surface); color: var(--am-ink) !important; border: 1px solid var(--am-line); } .btn-white:hover, .btn-light:hover { border-color: var(--am-teal-400); color: var(--am-teal-700) !important; } .btn-gray { background: var(--am-surface-2); color: var(--am-ink) !important; } .btn-gray:hover { background: var(--am-teal-500); color: #fff !important; } .sign-links, .find-links, .bclink { color: var(--am-teal-700) !important; } .sign-links:hover, .find-links:hover, .bclink:hover { color: var(--am-sea-700) !important; text-decoration: underline; } .other-news-list li { display: block; margin-bottom: .5rem; } .other-news-list li a { display: flex; align-items: center; gap: .75rem; color: var(--am-ink); font-size: .9rem; } .other-news-list li a:hover { color: var(--am-teal-700); } .onl-image { width: 42px; height: 42px; border-radius: 12px; background-size: cover; background-position: center; flex: 0 0 42px; } .onl-text { flex: 1; } .onl-detail { margin-left: auto; color: var(--am-ink-faint); } .county, .county-antalya, .spot { background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; border-radius: var(--am-r); color: #fff !important; font-weight: 500; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); min-height: 120px; margin-bottom: 1rem; } .county-antalya { min-height: 180px; } .spot { min-height: 170px; } .home-link-banner, .footer-spots .spot img { display: none; } .footer-spots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .footer-spots .col-12 { display: contents; } .widgets { padding: 1rem; border-radius: var(--am-r); } .widgets .widget-name { font-weight: 500; } .widgets a { color: var(--am-ink) !important; } .exch-title { font-size: .78rem; font-weight: 500; color: var(--am-ink-faint); } .exch-text { font-size: 1rem; font-weight: 500; } .bg-body-tertiary, .bg-light { background: var(--am-surface-2) !important; } .bg-white { background: var(--am-surface) !important; } .border, .border-top, .border-bottom { border-color: var(--am-line) !important; } .text-muted { color: var(--am-ink-soft) !important; } .shadow, .shadow-sm { box-shadow: var(--am-shadow-sm) !important; } .rounded-2 { border-radius: var(--am-r) !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select { font-family: var(--am-font); color: var(--am-ink); background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r-sm); padding: .6rem .85rem; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--am-teal-400); box-shadow: 0 0 0 4px rgba(18, 168, 160, .14); } .ucx-captcha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 1.25rem; } .ucx-captcha img { height: 42px; width: 150px; border-radius: var(--am-r-sm); } .ucx-captcha a { display: inline-flex; align-items: center; height: 42px; padding: 0 .9rem; border-radius: var(--am-r-sm); background: var(--am-sea-700); color: #fff !important; font-size: .85rem; } .ucx-captcha a:hover { background: var(--am-sea-800); color: #fff !important; } .carousel-caption h5, .carousel-caption p { background: rgba(5, 26, 38, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-radius: var(--am-r-sm); padding: .5rem .75rem; } .home-slide-photo, .county-slide-photo { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--am-r); } .home-guide-logo { width: 48px; height: 32px; object-fit: scale-down; } .home-guide-box { min-height: 56px; } .messagearea { min-height: 130px; } /* =========================================================================== 15 - DUYARLI (RESPONSIVE) =========================================================================== */ @media (max-width: 991.98px) { .am-nav { display: none; } .am-burger { display: grid; } .am-feature { min-height: 380px; } } @media (max-width: 575.98px) { .am-header-inner { min-height: 60px; } .am-brand img { height: 30px; } .am-search-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .am-search-tabs::-webkit-scrollbar { display: none; } .am-search-box { padding-left: .9rem; } .am-feature { min-height: 330px; } .am-section-head { align-items: flex-start; flex-direction: column; } .am-guest-body { min-height: 240px; } } @media print { .am-header, .am-footer, .am-search, .am-rail-nav, .am-slider-ctrl, .am-ad { display: none !important; } body { background: #fff; color: #000; } } /* =========================================================================== 16 - HOME'A OZEL DUZEN PARCALARI (kamber/views/home.php tarafindan kullanilir) =========================================================================== */ /* --- One cikan yazilar: solda slider, sagda yan liste --- */ .am-featured-split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } @media (max-width: 991.98px) { .am-featured-split { grid-template-columns: 1fr; } } .am-sidelist-sep { border: 0; border-top: 1px solid var(--am-line); margin: .55rem .6rem; } /* --- Gunluk servis kartlari --- */ .am-service { display: flex; flex-direction: column; gap: .45rem; padding: .95rem 1rem; min-height: 116px; color: var(--am-ink); } .am-service:hover { color: var(--am-ink); border-color: var(--am-teal-400); box-shadow: var(--am-shadow); transform: translateY(-3px); } .am-service-value { font-size: 1.12rem; font-weight: 500; letter-spacing: -.01em; } .am-service-foot { margin-top: auto; font-size: .74rem; color: var(--am-ink-faint); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .am-service-pair { display: flex; gap: 1.1rem; } .am-service-pair > span { display: flex; flex-direction: column; line-height: 1.25; } .am-service-pair small { font-size: .7rem; color: var(--am-ink-faint); } .am-service-pair strong { font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; } /* --- Konuk defteri basligi: koyu deniz panel uzerinde beyaz --- */ .am-guest-head { margin-bottom: 1.2rem; } .am-guest-head h2 { color: #fff; margin: 0; } .am-guest-head .am-em { color: var(--am-aqua-300); } .am-guest .am-eyebrow { color: var(--am-aqua-300); } .am-guest .am-eyebrow::before { background: linear-gradient(90deg, var(--am-aqua-300), transparent); } .am-guest blockquote { margin: 0; } .am-guest .am-btn-ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; } .am-guest .am-btn-ghost:hover { background: #fff; color: var(--am-sea-800); } .am-guest-name { display: block; } /* --- Arama onerilerinde eslesme vurgusu ve "tumunde ara" satiri --- */ .am-suggest mark { background: rgba(18, 168, 160, .20); color: inherit; padding: 0 .1em; border-radius: 3px; font-weight: 500; } :root[data-bs-theme="dark"] .am-suggest mark { background: rgba(111, 227, 213, .24); } .am-suggest-all { color: var(--am-teal-700); font-weight: 400; } .am-suggest-all i { color: var(--am-teal-600); } /* --- Koyu gorsel uzerindeki rozetler --- .am-badge-teal acik zemin icin tasarlandi (koyu turkuaz yazi). Vitrin kartinda zemin koyu oldugu icin orada okunmuyordu; fotograf uzerindeki rozetler cam gorunume cevrilir. */ .am-feature .am-badge, .am-place .am-badge { background: rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .28); color: #fff; } /* =========================================================================== 17 - FIRMA REHBERI guide-categories.php, guides.php, guide.php tarafindan kullanilir. Portalin en cok kullanilan modulu; oncelik hizli tarama ve tek dokunusla iletisim (telefon/mail/yol tarifi). =========================================================================== */ /* --- Suzme cubugu: liste icinde aninda arama (ui.js -> AmFilter) --- */ .am-filter { position: relative; display: flex; align-items: center; gap: .6rem; padding: .35rem .35rem .35rem 1.1rem; background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r-pill); box-shadow: var(--am-shadow-sm); } .am-filter > i { color: var(--am-teal-600); } .am-filter input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: .6rem 0; font-family: var(--am-font); font-size: .95rem; font-weight: 350; color: var(--am-ink); } .am-filter-clear { display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--am-surface-2); color: var(--am-ink-soft); cursor: pointer; } .am-filter-clear:hover { background: var(--am-teal-500); color: #fff; } /* --- Kategori karti --- */ .am-cat { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.1rem; border-radius: var(--am-r); background: var(--am-surface); border: 1px solid var(--am-line); color: var(--am-ink); transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-cat:hover { transform: translateY(-2px); box-shadow: var(--am-shadow); border-color: var(--am-teal-400); color: var(--am-teal-700); } .am-cat-name { font-size: .9rem; line-height: 1.35; } .am-cat-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: var(--am-r-pill); background: var(--am-surface-2); color: var(--am-ink-soft); font-size: .76rem; font-weight: 500; } .am-cat:hover .am-cat-count { background: var(--am-teal-500); color: #fff; } /* --- Firma karti (liste) --- */ .am-biz { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .9rem; padding: 1rem; border-radius: var(--am-r-lg); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-biz:hover { transform: translateY(-3px); box-shadow: var(--am-shadow); border-color: var(--am-teal-400); } .am-biz-logo { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--am-line); overflow: hidden; } .am-biz-logo img { width: 100%; height: 100%; object-fit: scale-down; padding: 5px; } /* Logosu olmayan firmalar icin bas harf rozeti */ .am-biz-logo-blank { background: linear-gradient(135deg, var(--am-teal-400), var(--am-sea-600)); color: #fff; font-family: var(--am-font-display); font-size: 1.5rem; } .am-biz-name { display: block; font-family: var(--am-font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.3; color: var(--am-ink); } .am-biz:hover .am-biz-name { color: var(--am-teal-700); } .am-biz-lines { margin-top: .3rem; font-size: .84rem; color: var(--am-ink-soft); } .am-biz-lines div { display: flex; align-items: flex-start; gap: .45rem; margin-top: .18rem; } .am-biz-lines i { color: var(--am-teal-500); margin-top: .18rem; flex: 0 0 auto; } /* Tek dokunusla iletisim dugmeleri */ .am-biz-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } .am-act { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .7rem; border-radius: var(--am-r-pill); border: 1px solid var(--am-line); background: var(--am-surface-2); color: var(--am-ink-soft); font-size: .78rem; transition: background var(--am-t), color var(--am-t), border-color var(--am-t); } .am-act:hover { background: var(--am-teal-500); border-color: var(--am-teal-500); color: #fff; } .am-act-call:hover { background: var(--am-green-500); border-color: var(--am-green-500); } /* --- Firma detayi basligi --- */ .am-bizhead { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .am-bizhead-logo { width: 92px; height: 92px; flex: 0 0 92px; display: grid; place-items: center; border-radius: 22px; background: #fff; border: 1px solid rgba(255, 255, 255, .4); box-shadow: var(--am-shadow); overflow: hidden; } .am-bizhead-logo img { width: 100%; height: 100%; object-fit: scale-down; padding: 8px; } .am-bizhead-logo-blank { background: linear-gradient(135deg, var(--am-teal-400), var(--am-sea-700)); color: #fff; font-family: var(--am-font-display); font-size: 2.2rem; } /* Detaydaki buyuk aksiyon dugmeleri */ .am-bizhead-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; } /* --- Kunye listesi (firma bilgileri) --- */ .am-deflist { display: grid; gap: .1rem; } .am-deflist > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--am-line); font-size: .9rem; } .am-deflist > div:last-child { border-bottom: 0; } .am-deflist dt { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--am-ink-faint); font-weight: 400; } .am-deflist dt i { color: var(--am-teal-500); } .am-deflist dd { margin: 0; color: var(--am-ink); overflow-wrap: anywhere; } @media (max-width: 575.98px) { .am-deflist > div { grid-template-columns: 1fr; gap: .15rem; } } /* --- Firma fotograflari --- */ .am-biz-photos { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .am-biz-photos a { display: block; aspect-ratio: 4 / 3; border-radius: var(--am-r); overflow: hidden; border: 1px solid var(--am-line); } .am-biz-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .am-biz-photos a:hover img { transform: scale(1.06); } /* --- Sekmeler (hakkinda / hizmetler / yorumlar) --- */ .am-tabs { display: flex; gap: .2rem; flex-wrap: wrap; border-bottom: 1px solid var(--am-line); margin-bottom: 1.2rem; } .am-tab { position: relative; padding: .65rem 1rem; border: none; background: none; color: var(--am-ink-soft); font-family: var(--am-font); font-size: .92rem; font-weight: 400; cursor: pointer; transition: color var(--am-t); } .am-tab::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--am-teal-400), var(--am-aqua-300)); transform: scaleX(0); transform-origin: center; transition: transform 240ms cubic-bezier(.4, 0, .2, 1); } .am-tab:hover { color: var(--am-ink); } .am-tab.is-active { color: var(--am-teal-700); font-weight: 500; } .am-tab.is-active::after { transform: scaleX(1); } /* =========================================================================== 18 - SERVIS SAYFALARI daily-rates, pharmacy, prayer-times, super-lig, fuel-prices, antalya-maps Bu sayfalarin ortak derdi: veri cron ile geliyor ve BAYATLAYABILIYOR. Bu yuzden her sayfada verinin tarihi ve tazeligi gorunur durumda. =========================================================================== */ /* --- Veri tazeligi seridi --- */ .am-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .8rem 1.1rem; border-radius: var(--am-r); background: var(--am-surface-2); font-size: .85rem; color: var(--am-ink-soft); } .am-freshness i { color: var(--am-teal-600); } /* Bayat veride uyari tonuna gecer */ .am-freshness.is-stale { background: rgba(226, 169, 79, .16); border: 1px solid rgba(226, 169, 79, .35); color: var(--am-ink); } .am-freshness.is-stale i { color: var(--am-sand-500); } /* --- Sayi karti (kur, fiyat, vakit) --- */ .am-stat { display: flex; flex-direction: column; gap: .3rem; padding: 1.15rem 1.25rem; border-radius: var(--am-r-lg); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); } .am-stat-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--am-ink-faint); letter-spacing: .04em; text-transform: uppercase; } .am-stat-label i { color: var(--am-teal-500); font-size: .95rem; } .am-stat-value { font-family: var(--am-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; color: var(--am-ink); line-height: 1.1; } .am-stat-sub { font-size: .8rem; color: var(--am-ink-soft); } /* Alis / satis ikilisi */ .am-stat-pair { display: flex; gap: 1.4rem; margin-top: .2rem; } .am-stat-pair > div { display: flex; flex-direction: column; } .am-stat-pair span { font-size: .72rem; color: var(--am-ink-faint); } .am-stat-pair strong { font-family: var(--am-font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; } /* Vurgulu kart (o anki namaz vakti gibi) */ .am-stat.is-now { background: linear-gradient(135deg, var(--am-sea-800), var(--am-teal-700)); border-color: transparent; box-shadow: var(--am-shadow); } .am-stat.is-now .am-stat-label, .am-stat.is-now .am-stat-sub { color: rgba(255, 255, 255, .78); } .am-stat.is-now .am-stat-label i { color: var(--am-aqua-300); } .am-stat.is-now .am-stat-value { color: #fff; } /* --- Tablo --- */ .am-table-wrap { overflow-x: auto; border-radius: var(--am-r-lg); border: 1px solid var(--am-line); background: var(--am-surface); box-shadow: var(--am-shadow-sm); } .am-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .am-table thead th { position: sticky; top: 0; z-index: 1; padding: .85rem 1rem; background: var(--am-surface-2); color: var(--am-ink-faint); font-weight: 500; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; } .am-table tbody td { padding: .8rem 1rem; border-top: 1px solid var(--am-line); color: var(--am-ink-soft); } .am-table tbody tr:hover td { background: var(--am-surface-2); } .am-table .am-td-main { color: var(--am-ink); font-weight: 400; } .am-table .am-td-num { text-align: right; font-variant-numeric: tabular-nums; } .am-table .am-td-strong { text-align: right; font-family: var(--am-font-display); font-weight: 500; font-size: 1.05rem; color: var(--am-ink); font-variant-numeric: tabular-nums; } /* Sira rozeti (puan durumu) */ .am-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--am-surface-2); color: var(--am-ink-soft); font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; } .am-rank-top { background: linear-gradient(135deg, var(--am-teal-400), var(--am-teal-600)); color: #fff; } .am-rank-euro { background: rgba(18, 168, 160, .18); color: var(--am-teal-700); } .am-rank-down { background: rgba(214, 69, 92, .16); color: var(--am-red-500); } /* Puan durumu aciklama satiri */ .am-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--am-ink-faint); } .am-legend span { display: inline-flex; align-items: center; gap: .4rem; } .am-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } /* --- Eczane karti --- */ .am-pharm { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem; border-radius: var(--am-r-lg); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-pharm:hover { transform: translateY(-3px); box-shadow: var(--am-shadow); border-color: var(--am-teal-400); } .am-pharm-dist { align-self: flex-start; padding: .18rem .6rem; border-radius: var(--am-r-pill); background: rgba(18, 168, 160, .14); color: var(--am-teal-700); font-size: .72rem; font-weight: 500; letter-spacing: .03em; } :root[data-bs-theme="dark"] .am-pharm-dist { color: var(--am-aqua-300); } .am-pharm-name { font-family: var(--am-font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: var(--am-ink); } .am-pharm-addr { font-size: .84rem; color: var(--am-ink-soft); display: flex; gap: .45rem; } .am-pharm-addr i { color: var(--am-teal-500); margin-top: .18rem; flex: 0 0 auto; } .am-pharm-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .3rem; } /* --- Harita --- */ .am-map-lg { width: 100%; height: clamp(320px, 45vh, 560px); border: 0; border-radius: var(--am-r-lg); box-shadow: var(--am-shadow-sm); display: block; } /* =========================================================================== 19 - SONUC SAYFASI result.php — form gonderimlerinden sonra gosterilen ortak sayfa. =========================================================================== */ .am-result { max-width: 620px; margin-inline: auto; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 2.5rem); text-align: center; border-radius: var(--am-r-xl); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow); } .am-result h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: .6rem; } .am-result-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: 50%; font-size: 2rem; color: #fff; } .am-result-success .am-result-icon { background: linear-gradient(135deg, var(--am-teal-400), var(--am-teal-600)); } .am-result-error .am-result-icon { background: linear-gradient(135deg, var(--am-sand-400), var(--am-coral-600)); } .am-result-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; } /* breadcrumb model tarafindan hazir olarak geliyor; buton kabugu icine girdigi icin kendi rengini devralmasi saglanir */ .am-result-actions .am-btn-outline a { color: inherit; } /* Model, mesaji Bootstrap alert HTML'i olarak uretiyor (alert-success / alert-danger). Tema ile uyumlu gorunmesi icin burada yeniden boyanir; modele dokunmaya gerek kalmaz. */ .am-result-msg .alert { margin: 0; padding: .9rem 1.1rem; border-radius: var(--am-r); border: 1px solid var(--am-line); background: var(--am-surface-2); color: var(--am-ink-soft); font-size: .95rem; } .am-result-msg .alert-success { background: rgba(18, 168, 160, .12); border-color: rgba(18, 168, 160, .3); color: var(--am-ink); } .am-result-msg .alert-danger { background: rgba(214, 69, 92, .12); border-color: rgba(214, 69, 92, .3); color: var(--am-ink); } /* =========================================================================== 20 - UYE ALANI VE FORMLAR signin, my-*, new-company-form — ortak form kabugu ve aranabilir secim. =========================================================================== */ /* --- Form kabugu --- */ .am-form-card { max-width: 760px; margin-inline: auto; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: var(--am-r-xl); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow); } .am-form-card-wide { max-width: none; } /* Alan etiketi */ .am-label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 500; color: var(--am-ink-soft); } .am-label .am-opt { color: var(--am-ink-faint); font-weight: 400; } /* Alan aciklamasi */ .am-hint { display: block; margin-top: .3rem; font-size: .76rem; color: var(--am-ink-faint); } /* Form bolum basligi */ .am-fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; } .am-fieldset legend { padding: 0; margin-bottom: .9rem; float: left; width: 100%; font-family: var(--am-font); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--am-teal-600); } .am-fieldset::after { content: ""; display: table; clear: both; } /* Dosya secici */ .am-file { display: block; width: 100%; padding: .7rem .9rem; border: 1px dashed var(--am-line); border-radius: var(--am-r-sm); background: var(--am-surface-2); color: var(--am-ink-soft); font-size: .85rem; cursor: pointer; } .am-file:hover { border-color: var(--am-teal-400); } .am-file::file-selector-button { margin-right: .8rem; padding: .35rem .8rem; border: none; border-radius: var(--am-r-pill); background: var(--am-teal-500); color: #fff; font-family: var(--am-font); font-size: .8rem; cursor: pointer; } /* Anahtar (switch) */ .am-switch { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 0; } .am-switch input { width: 42px; height: 24px; flex: 0 0 42px; margin: 0; accent-color: var(--am-teal-500); cursor: pointer; } .am-switch label { font-size: .9rem; color: var(--am-ink); cursor: pointer; } .am-switch .am-hint { margin-top: .15rem; } /* --- Uye paneli kisayollari --- */ .am-tile { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; border-radius: var(--am-r-lg); background: var(--am-surface); border: 1px solid var(--am-line); box-shadow: var(--am-shadow-sm); color: var(--am-ink); transition: transform var(--am-t), box-shadow var(--am-t), border-color var(--am-t); } .am-tile:hover { transform: translateY(-3px); box-shadow: var(--am-shadow); border-color: var(--am-teal-400); color: var(--am-ink); } .am-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: linear-gradient(135deg, var(--am-teal-400), var(--am-sea-600)); color: #fff; font-size: 1.15rem; } .am-tile-name { font-weight: 500; font-size: .95rem; } .am-tile-sub { font-size: .78rem; color: var(--am-ink-faint); } /* Yikici islem (hesap kaldirma) */ .am-tile-danger .am-tile-icon { background: linear-gradient(135deg, var(--am-sand-400), var(--am-coral-600)); } .am-tile-danger:hover { border-color: var(--am-coral-500); } /* Uyari kutusu */ .am-warn { display: flex; gap: .8rem; padding: 1rem 1.15rem; border-radius: var(--am-r); background: rgba(242, 118, 90, .10); border: 1px solid rgba(242, 118, 90, .32); color: var(--am-ink); font-size: .9rem; } .am-warn i { color: var(--am-coral-600); font-size: 1.1rem; flex: 0 0 auto; } /* --- Aranabilir secim (ui.js -> AmSelect) --- */ .am-select { position: relative; } /* Gercek