/* ============================================================ directory.css — İlan Card + Grid + Featured Section + Badges ============================================================ Premium koyu zemin + altın aksan + WhatsApp yeşili CTA */ /* ============ ICONS BASE ============ */ .escort-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ============ SECTION HEADINGS ============ */ .section-heading { font-size: 1.4rem; font-weight: 700; margin: 2.5rem 0 1.25rem; display: flex; align-items: center; gap: .5rem; letter-spacing: -.01em; } .section-heading--featured { color: #C9A961; } .section-heading--featured .escort-icon { color: #C9A961; } @media (max-width: 640px) { .section-heading { font-size: 1.2rem; margin: 2rem 0 1rem; } } /* ============ İLAN GRID (mobile-first) ============ */ .ilan-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; } .ilan-grid--featured { margin-bottom: 2.5rem; } .ilan-grid--related { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; } .home-latest .ilan-grid { grid-template-columns: repeat(var(--home-grid-cols, 4), minmax(0, 1fr)); } @media (max-width: 1200px) { .ilan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-latest .ilan-grid { grid-template-columns: repeat(min(var(--home-grid-cols, 4), 4), minmax(0, 1fr)); } } @media (max-width: 992px) { .ilan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-latest .ilan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .ilan-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } .home-latest .ilan-grid { grid-template-columns: repeat(2, 1fr); } .ilan-grid--related { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 380px) { .ilan-grid { grid-template-columns: 1fr; } .home-latest .ilan-grid { grid-template-columns: 1fr; } } /* ============ İLAN CARD ============ */ .ilan-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .ilan-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255, 61, 139, 0.15); border-color: var(--accent); } /* Tier styling */ .ilan-card--tier-premium { border-color: #C9A961; box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.3); } .ilan-card--tier-vip { border-color: rgba(168, 138, 74, 0.5); } /* Featured banner (üst şerit) */ .ilan-card--featured-banner .ilan-card__featured-banner { background: linear-gradient(90deg, #C9A961, #E8C77E, #C9A961); color: #1A1A1F; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; display: flex; align-items: center; justify-content: center; gap: 5px; } .ilan-card--featured-banner .ilan-card__featured-banner .escort-icon { color: #1A1A1F; } /* ── Card Media (foto) ── */ .ilan-card__media { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-elev, #2d1a4a); } .ilan-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .ilan-card:hover .ilan-card__img { transform: scale(1.04); } .ilan-card__img--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-elev), var(--border)); color: var(--text-dim); } /* ── Tier rozet (sol üst) ── */ .ilan-card__tier-badge { position: absolute; top: 8px; left: 8px; background: #C9A961; color: #1A1A1F; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; z-index: 2; } /* ── Verified rozet (sağ üst) ── */ .ilan-card__verified-badge { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: #0A84FF; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } /* ── Live dot (sağ alt foto köşesi) ── */ .ilan-card__live-dot { position: absolute; bottom: 8px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3); animation: pulse-live 2s infinite; z-index: 2; } @keyframes pulse-live { 0%, 100% { box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.1); } } /* ── Card Body ── */ .ilan-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .ilan-card__title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .ilan-card__title a { color: var(--text-strong); text-decoration: none; border: 0; } .ilan-card__title a:hover { color: var(--accent); } .ilan-card__age { color: var(--text-dim); font-weight: 400; } /* ── Meta row (lokasyon + uyruk) ── */ .ilan-card__meta-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-dim); } .ilan-card__meta-item { display: inline-flex; align-items: center; gap: 4px; } .ilan-card__meta-item--uyruk { background: rgba(255, 255, 255, 0.04); padding: 1px 8px; border-radius: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } /* ── Chip'ler (kategori) ── */ .ilan-card__chips { display: flex; flex-wrap: wrap; gap: 4px; } .ilan-card__chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(255, 61, 139, 0.12); color: var(--accent); text-decoration: none; border: 1px solid rgba(255, 61, 139, 0.25); transition: all .15s; } .ilan-card__chip:hover { background: rgba(255, 61, 139, 0.22); color: var(--text-strong); } /* ── Fiyat ── */ .ilan-card__price { font-size: 13px; color: var(--text-dim); margin-top: auto; padding-top: 4px; } .ilan-card__price strong { color: var(--text-strong); font-size: 14px; } .ilan-card__price-from { font-size: 11px; color: var(--text-dim); text-transform: lowercase; } /* ============ WHATSAPP CTA ============ */ .escort-whatsapp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #fff !important; text-decoration: none; font-weight: 600; border-radius: 8px; border: 0; cursor: pointer; transition: background .15s, transform .1s; white-space: nowrap; } .escort-whatsapp-cta:hover { background: #1EBE5A; transform: translateY(-1px); color: #fff; } .escort-whatsapp-cta:active { transform: translateY(0); } /* Sizes */ .escort-whatsapp-cta--small { padding: 6px 10px; font-size: 12px; } .escort-whatsapp-cta--medium { padding: 9px 14px; font-size: 13px; width: 100%; } .escort-whatsapp-cta--large { padding: 12px 22px; font-size: 15px; } .escort-whatsapp-cta__icon { display: inline-flex; } /* Mobile sticky bottom CTA — sadece single-ilan'da görünür */ .escort-whatsapp-cta--sticky { display: none; /* default desktop'ta gizli */ } @media (max-width: 768px) { .escort-whatsapp-cta--sticky { display: inline-flex; position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 999; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); padding: 14px 22px; font-size: 16px; border-radius: 50px; width: auto; } } /* ============ MÜŞTERİ CTA (SEO ilan → AMP redirect) ============ */ .musteri-redirect-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: linear-gradient(135deg, #C9A961 0%, #A88A4A 100%); color: #1A1A1F !important; text-decoration: none; font-weight: 700; border-radius: 12px; box-shadow: 0 4px 14px rgba(201, 169, 97, 0.25); transition: transform .15s, box-shadow .15s; } .musteri-redirect-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(201, 169, 97, 0.4); color: #1A1A1F; } .musteri-redirect-cta__icon { display: inline-flex; align-items: center; } .musteri-redirect-cta__label { flex: 1; display: flex; flex-direction: column; font-size: 16px; line-height: 1.2; } .musteri-redirect-cta__label small { font-size: 12px; font-weight: 500; opacity: 0.7; margin-top: 2px; } .musteri-redirect-cta__arrow { display: inline-flex; } /* Mobile sticky bottom — single-ilan'da */ .ilan-sticky-cta .musteri-redirect-cta { display: none; /* desktop'ta gizli */ } @media (max-width: 768px) { .ilan-sticky-cta .musteri-redirect-cta { display: flex; position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 999; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); } } /* ============ MÜŞTERİ KART (Plan B — Laravel external link) ============ */ .musteri-section { margin: 2.5rem 0; } .section-subheading { margin: -.5rem 0 1rem; color: var(--text-dim); font-size: 14px; } .musteri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.25rem; } @media (max-width: 640px) { .musteri-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } } .musteri-card { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s, border-color .2s; } .musteri-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(201, 169, 97, 0.18); border-color: #C9A961; color: var(--text-strong); } .musteri-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-elev); } .musteri-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .musteri-card:hover .musteri-card__img { transform: scale(1.05); } .musteri-card__img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-dim); background: linear-gradient(135deg, var(--bg-elev), var(--border)); } /* External link rozeti (sağ alt) */ .musteri-card__external-badge { position: absolute; bottom: 8px; right: 8px; width: 24px; height: 24px; background: rgba(201, 169, 97, 0.95); color: #1A1A1F; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .musteri-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; } .musteri-card__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-strong); } .musteri-card__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--text-dim); } .musteri-card__location { display: inline-flex; align-items: center; gap: 3px; } .musteri-card__price { background: rgba(201, 169, 97, 0.12); color: #C9A961; padding: 1px 8px; border-radius: 10px; font-weight: 600; font-size: 11px; } /* ============ EMPTY STATE (taxonomy archive) ============ */ .empty-state { margin: 3rem 0; text-align: center; } .empty-state-inner { background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 3rem 2rem; max-width: 640px; margin: 0 auto; } .empty-state-inner h2 { margin: 0 0 .75rem; font-size: 1.6rem; color: var(--accent); border: 0; padding: 0; } .empty-state-inner p { color: var(--text-dim); font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; } .empty-state-inner .empty-cta { margin-top: 1.5rem; } /* ============ ARCHIVE PARENT (yaka context) ============ */ .archive-parent { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-dim); } .archive-parent a { color: var(--accent); font-weight: 500; } .archive-parent .crumb-sep { margin: 0 .35rem; opacity: .5; } /* ============ TERM CONTENT (rich HTML, term description) ============ */ .term-content-rich { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 1.75rem 2rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0 2rem; line-height: 1.75; } .term-content-rich p { color: var(--text); margin-bottom: 1.1rem; } .term-content-rich h2 { margin-top: 2rem; font-size: 1.55rem; border-bottom: 2px solid var(--border-soft); padding-bottom: .4rem; scroll-margin-top: 1rem; } .term-content-rich h2:first-child { margin-top: 0; } .term-content-rich h3 { color: var(--accent-hover); margin-top: 1.5rem; } .term-content-rich ul, .term-content-rich ol { color: var(--text); padding-left: 1.5rem; margin-bottom: 1.2rem; } .term-content-rich li { margin-bottom: .35rem; } .term-content-rich a { color: var(--accent); border-bottom: 1px dotted var(--accent); } .term-content-rich a:hover { color: var(--accent-hover); border-bottom-style: solid; } .term-content-rich strong { color: var(--text-strong); } .term-content-rich blockquote { border-left: 3px solid var(--accent); padding: .5rem 0 .5rem 1.25rem; margin: 1.25rem 0; color: var(--text-dim); font-style: italic; } /* ============ HOMEPAGE: KATEGORİ + FORMAT CHIPS ============ */ .home-kategoriler, .home-formatlar, .home-ozel-hizmetler, .archive-chip-sections .home-kategoriler, .archive-chip-sections .home-ozel-hizmetler { margin: 2.5rem 0; } .archive-chip-sections { margin: 1.5rem 0 2rem; } .kategori-chips, .format-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; } .kategori-chip, .format-chip { display: inline-flex; align-items: center; padding: .65rem 1.2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; color: var(--text); text-decoration: none; transition: all .15s ease; font-size: .95rem; font-weight: 500; } .kategori-chip:hover, .format-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-strong); transform: translateY(-1px); } /* Format chip: altın aksanlı vurgu */ .format-chip { background: rgba(201, 169, 97, 0.06); border-color: rgba(201, 169, 97, 0.3); color: #C9A961; } .format-chip:hover { background: rgba(201, 169, 97, 0.18); border-color: #C9A961; color: #fff; } /* ============ HOMEPAGE: YAN KATEGORİ PANELİ ============ */ .home-layout { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin: 1.5rem 0 2.5rem; } .home-layout__main { min-width: 0; } .home-layout__main .section-heading { margin-top: 0; } .home-cat-sidebar-toggle { display: none; align-items: center; justify-content: center; gap: .5rem; position: fixed; left: 1rem; bottom: 1rem; z-index: 120; padding: .75rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; background: linear-gradient(135deg, var(--bg-card), var(--bg-elev)); color: var(--text-strong); font-size: .92rem; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-cat-sidebar-toggle:hover { border-color: var(--accent); box-shadow: var(--shadow-strong); transform: translateY(-1px); } .home-cat-sidebar-overlay { position: fixed; inset: 0; background: rgba(8, 4, 16, 0.72); z-index: 130; backdrop-filter: blur(2px); } .home-cat-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .home-cat-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--bg-elev), var(--bg-card)); position: sticky; top: 0; z-index: 2; } .home-cat-sidebar__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-strong); } .home-cat-sidebar__close { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-dim); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .home-cat-sidebar__close:hover { color: var(--text-strong); border-color: var(--accent); background: var(--accent-soft); } .home-cat-sidebar__nav { padding: .35rem 0 .75rem; } .home-cat-panel { border-bottom: 1px solid var(--border-soft); } .home-cat-panel:last-child { border-bottom: 0; } .home-cat-panel__summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; user-select: none; transition: background .15s ease; } .home-cat-panel__summary::-webkit-details-marker { display: none; } .home-cat-panel__summary:hover { background: rgba(255, 61, 139, 0.06); } .home-cat-panel[open] > .home-cat-panel__summary { background: rgba(255, 61, 139, 0.08); } .home-cat-panel__title { font-size: .95rem; font-weight: 700; color: var(--text-strong); } .home-cat-panel__chevron { display: inline-flex; color: var(--text-dim); transition: transform .2s ease; } .home-cat-panel[open] .home-cat-panel__chevron { transform: rotate(180deg); color: var(--accent); } .home-cat-panel__body { padding: 0 .65rem .85rem; } .home-cat-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .home-cat-sidebar__list--compact { gap: .25rem; } .home-cat-sidebar__link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--text); font-size: .88rem; line-height: 1.35; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .home-cat-sidebar__link:hover { background: var(--bg-elev); border-color: var(--border); color: var(--text-strong); transform: translateX(2px); } .home-cat-sidebar__link--region { font-weight: 600; } .home-cat-sidebar__count { flex-shrink: 0; min-width: 1.5rem; text-align: center; font-size: .72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .1rem .45rem; } .home-cat-sidebar__districts { display: flex; flex-direction: column; gap: .35rem; } .home-cat-subpanel { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: rgba(15, 7, 28, 0.35); overflow: hidden; } .home-cat-subpanel__summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .75rem; cursor: pointer; list-style: none; } .home-cat-subpanel__summary::-webkit-details-marker { display: none; } .home-cat-subpanel__parent { font-size: .86rem; font-weight: 600; color: var(--text-strong); text-decoration: none; } .home-cat-subpanel__parent:hover { color: var(--accent); } .home-cat-subpanel .home-cat-sidebar__list { padding: 0 .45rem .55rem; } .home-cat-sidebar__district-item { list-style: none; } .home-cat-ilce-panel { border: 1px solid transparent; border-radius: var(--radius-sm); overflow: hidden; } .home-cat-ilce-panel__summary { display: flex; align-items: center; justify-content: space-between; gap: .35rem; padding: .45rem .5rem; cursor: pointer; list-style: none; } .home-cat-ilce-panel__summary::-webkit-details-marker { display: none; } .home-cat-ilce-panel__link { flex: 1; font-size: .86rem; font-weight: 600; color: var(--text); text-decoration: none; } .home-cat-ilce-panel__link:hover { color: var(--accent); } .home-cat-ilce-panel[open] { background: rgba(15, 7, 28, 0.45); border-color: var(--border-soft); } .home-cat-sidebar__list--semt { padding: 0 0 .35rem .65rem !important; gap: .15rem !important; } .home-cat-sidebar__link--semt { font-size: .82rem; padding: .4rem .55rem; color: var(--text-dim); } .home-cat-sidebar__link--semt:hover { color: var(--text-strong); } body.home-cat-sidebar-open { overflow: hidden; } @media (max-width: 991px) { .home-layout { display: block; margin-top: 1rem; } .home-cat-sidebar-toggle { display: inline-flex; } .home-cat-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 340px); max-height: none; z-index: 140; border-radius: 0 var(--radius) var(--radius) 0; transform: translateX(-105%); transition: transform .28s ease; } .home-cat-sidebar__close { display: inline-flex; } body.home-cat-sidebar-open .home-cat-sidebar { transform: translateX(0); } } @media (min-width: 992px) { .home-cat-sidebar-overlay, .home-cat-sidebar-toggle { display: none !important; } } /* ============ MOBİL UYUM ============ */ @media (max-width: 768px) { .term-content-rich { padding: 1.25rem; border-left-width: 3px; } .term-content-rich h2 { font-size: 1.3rem; } .term-content-rich h3 { font-size: 1.1rem; } .empty-state-inner { padding: 2rem 1.25rem; } .empty-state-inner h2 { font-size: 1.3rem; } .ilan-card__body { padding: 10px 12px 12px; gap: 6px; } .ilan-card__title { font-size: .95rem; } .ilan-card__meta-row { font-size: 12px; } .escort-whatsapp-cta--medium { padding: 8px 10px; font-size: 12px; } .kategori-chip, .format-chip { padding: .55rem 1rem; font-size: .85rem; } }