/*
Theme Name: Opsikolog
Theme URI: https://opsikolog.com
Author: Opsikolog
Author URI: https://opsikolog.com
Description: Farklı şehirlerdeki uzman psikologları listeleyen sade ve sakin bir dizin teması. Şehre ve isme göre arama, profil fotoğrafı, hakkımda yazısı ve WhatsApp iletişim butonu içerir.
Version: 5.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: opsikolog
*/

/* =====================================================
   1. Design tokens
   ===================================================== */
:root{
	--paper:      #F5F2ED;
	--paper-alt:  #ECE7DC;
	--ink:        #24322D;
	--ink-soft:   #55655D;
	--pine:       #3F6259;
	--pine-dark:  #2C4640;
	--gold:       #B08A3E;
	--line:       #DDD5C6;
	--whatsapp:   #25D366;
	--whatsapp-dark: #1DA851;
	--card-bg:    #FFFFFF;
	--radius-s:   10px;
	--radius-m:   16px;
	--radius-l:   28px;
	--shadow-card: 0 2px 4px rgba(36,50,45,.04), 0 10px 24px -12px rgba(36,50,45,.12);
	--font-display: "Fraunces", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--container: 1160px;
	--header-h: 65px;
	--footer-h: 68px;
}

/* =====================================================
   2. Reset & base
   ===================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	padding-top:var(--header-h);
	padding-bottom:var(--footer-h);
}
.site-main{ display:block; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
	font-family:var(--font-display);
	font-weight:600;
	line-height:1.18;
	margin:0 0 .5em;
	color:var(--pine-dark);
}
h1{ font-size:clamp(2rem, 4vw, 3.1rem); }
h2{ font-size:clamp(1.3rem, 2.4vw, 1.7rem); }
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* =====================================================
   3. Buttons
   ===================================================== */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:11px 20px;
	border-radius:999px;
	font-weight:600;
	font-size:.92rem;
	border:1px solid transparent;
	transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
	white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-whatsapp{
	background:var(--whatsapp);
	color:#fff;
}
.btn-whatsapp:hover{ background:var(--whatsapp-dark); }
.btn-whatsapp::before{
	content:"";
	width:16px; height:16px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.02 2.67C8.62 2.67 2.6 8.68 2.6 16.08c0 2.5.66 4.87 1.9 6.98L2.67 29.3l6.4-1.68a13.4 13.4 0 0 0 6.95 1.9h.01c7.4 0 13.42-6.02 13.42-13.42 0-3.58-1.4-6.96-3.94-9.5a13.34 13.34 0 0 0-9.49-3.93Zm0 24.55h-.01a11.14 11.14 0 0 1-5.67-1.55l-.41-.24-4.24 1.11 1.13-4.13-.27-.42a11.15 11.15 0 0 1-1.71-5.9c0-6.16 5.02-11.18 11.19-11.18 2.99 0 5.8 1.17 7.91 3.28a11.1 11.1 0 0 1 3.27 7.91c0 6.17-5.02 11.12-11.19 11.12Zm6.14-8.34c-.34-.17-1.98-.98-2.29-1.09-.31-.11-.53-.17-.75.17-.22.34-.86 1.09-1.06 1.31-.2.22-.39.25-.72.08-.34-.17-1.42-.52-2.71-1.67-1-.9-1.68-2-1.87-2.34-.2-.34-.02-.52.15-.69.15-.15.34-.39.51-.59.17-.2.22-.34.34-.56.11-.22.06-.42-.03-.59-.08-.17-.75-1.8-1.03-2.47-.27-.65-.55-.56-.75-.57-.2-.01-.42-.01-.64-.01-.22 0-.59.08-.9.42-.31.34-1.18 1.15-1.18 2.8 0 1.65 1.21 3.24 1.38 3.46.17.22 2.38 3.63 5.76 5.09.8.35 1.43.55 1.92.7.81.26 1.54.22 2.12.13.65-.1 1.98-.81 2.26-1.59.28-.78.28-1.44.2-1.59-.08-.14-.31-.22-.65-.39Z'/></svg>") center/contain no-repeat;
	-webkit-mask-repeat:no-repeat;
}
.btn-outline{
	background:transparent;
	border-color:var(--pine);
	color:var(--pine-dark);
}
.btn-outline:hover{ background:var(--pine); color:#fff; }
.btn-block{ display:flex; width:100%; margin-bottom:10px; }

/* =====================================================
   4. Header
   ===================================================== */
.site-header{
	background:var(--paper);
	border-bottom:1px solid var(--line);
	position:fixed; top:0; left:0; right:0; z-index:30;
	height:var(--header-h);
	display:flex;
	align-items:center;
	backdrop-filter:blur(6px);
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	gap:20px;
}
.site-logo{
	font-family:var(--font-display);
	font-size:1.3rem;
	font-weight:600;
	color:var(--pine-dark);
	letter-spacing:-.01em;
}
.site-nav ul{ display:flex; gap:28px; }
.site-nav a{
	font-size:.94rem;
	font-weight:500;
	color:var(--ink-soft);
}
.site-nav a:hover{ color:var(--pine-dark); }

.nav-toggle{
	display:none;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border:1px solid var(--line);
	border-radius:var(--radius-s);
	background:var(--card-bg);
	color:var(--pine-dark);
	font-size:1.2rem;
	cursor:pointer;
	line-height:1;
}
.nav-toggle:hover{ border-color:var(--pine); }

/* =====================================================
   5. Hero + divider
   ===================================================== */
.hero{ padding:32px 0 28px; }
.hero-inner{ max-width:720px; }
.eyebrow{
	text-transform:uppercase;
	letter-spacing:.14em;
	font-size:.76rem;
	font-weight:700;
	color:var(--gold);
	margin-bottom:14px;
}
.hero-sub{ color:var(--ink-soft); font-size:1.06rem; max-width:56ch; }

.search-form{ margin-top:28px; max-width:640px; }
.search-fields{
	display:flex;
	align-items:end;
	gap:12px;
	flex-wrap:wrap;
}
.search-field{
	display:flex;
	flex-direction:column;
	gap:8px;
	flex:1 1 200px;
}
.search-field label{ font-size:.85rem; font-weight:600; color:var(--ink-soft); }
.search-field select,
.search-field input[type="text"]{
	border:1px solid var(--line);
	border-radius:var(--radius-s);
	padding:12px 16px;
	font-size:.96rem;
	font-family:inherit;
	color:var(--ink);
	background:var(--card-bg);
}
.search-field select{
	appearance:none;
	background:var(--card-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355655D' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center/16px;
	padding-right:40px;
	cursor:pointer;
}
.search-field select:hover,
.search-field input[type="text"]:hover{ border-color:var(--pine); }
.search-submit{
	flex:0 0 auto;
	padding:12px 26px;
	height:46px;
}

.search-summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:22px;
	padding-bottom:16px;
	border-bottom:1px solid var(--line);
}
.search-summary p{ margin:0; color:var(--ink-soft); font-size:.94rem; }
.clear-search{
	font-size:.86rem;
	font-weight:600;
	color:var(--pine-dark);
	white-space:nowrap;
}
.clear-search:hover{ text-decoration:underline; }

.hero-divider{ margin:36px 0 8px; opacity:.9; }
.hero-divider svg{ width:100%; height:auto; display:block; }

/* =====================================================
   6. Listing grid & cards
   ===================================================== */
.listing{ padding:20px 0 72px; }
.psikolog-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:26px;
}
.psikolog-card{
	background:var(--card-bg);
	border:1px solid var(--line);
	border-radius:var(--radius-m);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	box-shadow:var(--shadow-card);
	transition:transform .18s ease, box-shadow .18s ease;
}
.psikolog-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(36,50,45,.22); }

.card-photo{ display:block; position:relative; aspect-ratio:4/3; background:var(--paper-alt); overflow:hidden; }
.card-photo img{ width:100%; height:100%; object-fit:cover; }
.photo-placeholder{
	width:100%; height:100%;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--font-display);
	font-size:2.6rem;
	color:var(--pine);
	background:linear-gradient(145deg, var(--paper-alt), #dfe6df);
}
.photo-placeholder.large{ font-size:4rem; border-radius:var(--radius-m); aspect-ratio:4/3; }

.card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-name{ margin:0; font-size:1.12rem; }
.card-name a:hover{ color:var(--pine); }
.card-unvan{ margin:0; font-size:.88rem; color:var(--ink-soft); font-weight:500; }

.card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
	font-size:.74rem;
	font-weight:600;
	padding:5px 11px;
	border-radius:999px;
	background:var(--paper-alt);
	color:var(--pine-dark);
	letter-spacing:.01em;
}
a.tag:hover{ background:var(--pine); color:#fff; }
.tag-online{ background:rgba(37,211,102,.14); color:var(--whatsapp-dark); }
.tag-sehir{ background:var(--pine); color:#fff; }
.tag-sehir:hover{ background:var(--pine-dark); color:#fff; }

.card-excerpt{ margin:2px 0 6px; font-size:.9rem; color:var(--ink-soft); flex:1; }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
.card-actions .btn{ flex:1; padding:10px 14px; font-size:.86rem; }

.empty-state{ text-align:center; padding:60px 0; color:var(--ink-soft); font-size:1.05rem; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.pagination a, .pagination span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:38px; height:38px; padding:0 10px;
	border-radius:999px; border:1px solid var(--line);
	font-size:.9rem; font-weight:600; color:var(--ink-soft);
}
.pagination .current{ background:var(--pine); border-color:var(--pine); color:#fff; }
.pagination a:hover{ border-color:var(--pine); color:var(--pine-dark); }

/* =====================================================
   7. Page hero (archive / taxonomy titles)
   ===================================================== */
.page-hero{ padding:36px 0 12px; }
.page-hero h1{ margin-bottom:.2em; }
.term-ust-metin{
	color:var(--ink-soft);
	font-size:1.02rem;
	max-width:70ch;
	margin-top:10px;
}
.term-alt-metin{
	margin-top:56px;
	padding-top:36px;
	border-top:1px solid var(--line);
	color:var(--ink-soft);
	font-size:.96rem;
	max-width:80ch;
}
.term-alt-metin h2, .term-alt-metin h3{ color:var(--pine-dark); font-size:1.15rem; }
.term-alt-metin p{ margin-bottom:1em; }

/* =====================================================
   8. Single psikolog profile
   ===================================================== */
.single-psikolog{ padding:36px 0 80px; }
.profile-grid{
	display:grid;
	grid-template-columns:260px 1fr 300px;
	gap:40px;
	align-items:start;
}
.profile-photo{
	position:relative;
	border-radius:var(--radius-m);
	overflow:hidden;
	aspect-ratio:4/5;
	background:var(--paper-alt);
	box-shadow:var(--shadow-card);
}
.profile-photo img{ width:100%; height:100%; object-fit:cover; }

.profile-main h1{ margin-bottom:.15em; }
.profile-unvan{ font-size:1.02rem; color:var(--ink-soft); font-weight:500; margin-bottom:14px; }
.profile-main .card-tags{ margin-bottom:22px; }
.profile-bio h2{ margin-bottom:.4em; }
.profile-bio{ color:var(--ink); font-size:1.02rem; }
.profile-bio p{ margin-bottom:1.1em; }

.profile-contact{ position:sticky; top:calc(var(--header-h) + 24px); }
.contact-card{
	background:var(--card-bg);
	border:1px solid var(--line);
	border-radius:var(--radius-m);
	padding:24px;
	box-shadow:var(--shadow-card);
}
.contact-card h2{ font-size:1.1rem; margin-bottom:16px; }

/* =====================================================
   9. Footer
   ===================================================== */
.site-footer{
	background:var(--pine-dark);
	color:#EDEFE9;
	position:fixed; bottom:0; left:0; right:0; z-index:30;
	height:var(--footer-h);
	display:flex;
	align-items:center;
}
.footer-inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	width:100%;
	gap:12px;
}
.site-footer p{ margin:0; font-size:.88rem; opacity:.85; }
.footer-nav ul{ display:flex; gap:20px; }
.footer-nav a{ font-size:.88rem; opacity:.85; }
.footer-nav a:hover{ opacity:1; }

/* =====================================================
   10. Premium rozeti
   ===================================================== */
.badge-premium{
	position:absolute;
	top:12px;
	left:12px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	gap:5px;
	background:var(--gold);
	color:#fff;
	font-size:.76rem;
	font-weight:700;
	padding:6px 12px;
	border-radius:999px;
	letter-spacing:.01em;
	box-shadow:0 4px 10px -4px rgba(176,138,62,.55);
}
.badge-premium-sm{ top:10px; left:10px; font-size:.7rem; padding:5px 10px; }

/* =====================================================
   11. Yıldız puanlama (görüntüleme)
   ===================================================== */
.ap-stars{ color:var(--gold); font-size:1rem; letter-spacing:1px; }
.ap-stars-sm{ font-size:.85rem; }
.card-rating, .profile-rating{
	display:flex;
	align-items:center;
	gap:6px;
	margin:0;
	font-size:.86rem;
	color:var(--ink-soft);
}
.profile-rating{ font-size:.98rem; margin-bottom:2px; }
.profile-rating-empty{ color:var(--ink-soft); font-style:italic; }
.rating-count{ color:var(--ink-soft); }

/* =====================================================
   12. Yıldız puanlama (yorum formunda seçim — saf CSS)
   ===================================================== */
.comment-form-rating{ margin-bottom:18px; }
.comment-form-rating > label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:8px; }
.ap-star-input{
	display:inline-flex;
	flex-direction:row-reverse;
	justify-content:flex-end;
	gap:4px;
	font-size:1.8rem;
}
.ap-star-input input{
	position:absolute;
	opacity:0;
	width:0;
	height:0;
}
.ap-star-input label,
#commentform .ap-star-input label{
	display:inline-block;
	cursor:pointer;
	color:var(--line);
	line-height:1;
	margin-bottom:0;
	font-weight:400;
	transition:color .12s ease;
}
.ap-star-input input:checked ~ label,
.ap-star-input label:hover,
.ap-star-input label:hover ~ label,
#commentform .ap-star-input input:checked ~ label,
#commentform .ap-star-input label:hover,
#commentform .ap-star-input label:hover ~ label{
	color:var(--gold);
}

/* =====================================================
   13. Değerlendirmeler (yorumlar)
   ===================================================== */
.reviews-section{
	margin-top:56px;
	padding-top:36px;
	border-top:1px solid var(--line);
}
.reviews-section h2{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.reviews-count{
	font-size:.8rem;
	font-weight:700;
	background:var(--paper-alt);
	color:var(--pine-dark);
	padding:3px 10px;
	border-radius:999px;
}
.ap-review-list{ list-style:none; margin:0 0 40px; padding:0; display:flex; flex-direction:column; gap:24px; }
.ap-review-item{
	background:var(--card-bg);
	border:1px solid var(--line);
	border-radius:var(--radius-m);
	padding:20px 22px;
}
.ap-review-head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:10px;
}
.ap-review-head img{ border-radius:50%; flex-shrink:0; }
.ap-review-author{ margin:0; font-weight:600; font-size:.94rem; color:var(--ink); }
.ap-review-date{ margin:0; font-size:.78rem; color:var(--ink-soft); }
.ap-review-head .ap-stars{ margin-left:auto; }
.ap-review-text p{ margin:0; font-size:.92rem; color:var(--ink); }

#commentform{
	background:var(--card-bg);
	border:1px solid var(--line);
	border-radius:var(--radius-m);
	padding:24px;
	max-width:560px;
}
#commentform p{ margin:0 0 16px; }
#commentform label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea{
	width:100%;
	border:1px solid var(--line);
	border-radius:var(--radius-s);
	padding:10px 14px;
	font-family:inherit;
	font-size:.94rem;
	color:var(--ink);
	background:var(--paper);
}
#commentform .required{ color:var(--gold); }
#commentform #submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:11px 24px;
	border-radius:999px;
	font-weight:600;
	font-size:.92rem;
	border:1px solid var(--pine);
	background:var(--pine);
	color:#fff;
	cursor:pointer;
}
#commentform #submit:hover{ background:var(--pine-dark); border-color:var(--pine-dark); }

/* =====================================================
   14. Basic page/content fallback
   ===================================================== */
.basic-page{ padding:36px 0 80px; max-width:760px; }
.basic-page .entry-content h2{ margin-top:1.4em; }

.blog-eyebrow{
	text-transform:none;
	letter-spacing:normal;
	font-weight:500;
	font-size:.86rem;
	color:var(--ink-soft);
	margin-bottom:10px;
}
.blog-eyebrow a{ color:var(--pine-dark); font-weight:600; }
.blog-eyebrow a:hover{ text-decoration:underline; }
.blog-featured-image{
	margin:24px 0 32px;
	border-radius:var(--radius-m);
	overflow:hidden;
	box-shadow:var(--shadow-card);
}
.blog-featured-image img{ width:100%; height:auto; }
.blog-tags{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }

#comments{ margin-top:16px; }
#comments .comments-title{ font-size:1.2rem; margin-bottom:20px; }
#comments .comment-list{ list-style:none; margin:0 0 32px; padding:0; }
#comments .comment-list .children{ list-style:none; padding-left:28px; }
#comments .comment-body{
	background:var(--card-bg);
	border:1px solid var(--line);
	border-radius:var(--radius-m);
	padding:18px 20px;
	margin-bottom:16px;
}
#comments .comment-author .fn{ font-weight:600; font-style:normal; color:var(--ink); }
#comments .comment-metadata{ font-size:.78rem; color:var(--ink-soft); margin-bottom:8px; }
#comments .comment-metadata a{ color:inherit; }
#comments .comment-content p{ margin:0 0 .6em; font-size:.92rem; }
#comments .comment-reply-link{ font-size:.8rem; font-weight:600; color:var(--pine-dark); }

/* =====================================================
   15. Responsive
   ===================================================== */
@media (max-width: 1024px){
	.psikolog-grid{ grid-template-columns:repeat(2, 1fr); }
	.profile-grid{ grid-template-columns:220px 1fr; }
	.profile-contact{ grid-column:1 / -1; position:static; }
}

@media (max-width: 640px){
	.nav-toggle{ display:flex; }
	.site-nav{
		display:none;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:var(--paper);
		border-bottom:1px solid var(--line);
		padding:16px 24px 20px;
	}
	.site-nav.is-open{ display:block; }
	.site-nav ul{ flex-direction:column; gap:14px; }
	.psikolog-grid{ grid-template-columns:1fr; }
	.profile-grid{ grid-template-columns:1fr; }
	.profile-photo{ max-width:260px; aspect-ratio:3/4; }
	.card-photo{ aspect-ratio:3/4; }
	.hero{ padding:24px 0 20px; }
	.card-actions .btn{ font-size:.82rem; padding:10px; }
	.search-fields{ display:block; }
	.search-field{ flex:none; margin-bottom:14px; }
	.search-submit{ width:100%; }
	.search-summary{ flex-direction:column; align-items:flex-start; }
	:root{ --footer-h: 92px; }
	.footer-inner{ flex-direction:column; align-items:flex-start; gap:6px; }
	.site-footer p{ font-size:.78rem; }
	.footer-nav ul{ gap:14px; }
}