/* ============================================================
 * BK Utilities — Tailwind CDN'in yerine geçen statik CSS.
 * Sadece site genelinde kullanılan sınıflar; Bootstrap ile
 * çakışmayanlar yazılı (Bootstrap'in flex-*, gap-*, mb-*
 * gibi karşılıkları zaten yüklü, dokunulmadı).
 *
 * Tailwind v3 tabanlı 4px scale: 1=0.25rem, 4=1rem, 8=2rem
 * ============================================================ */

/* ---------- Color palette (Tailwind extend → CSS vars) ---------- */
:root {
    --brandDark: #18392b;
    --brandGold: #ca9a21;
    --brandGoldHover: #a8801b;
    --brandGray: #f7f7f7;
    --brandBorder: #eaeaea;

    /* main- ve neutral- skalaları (orijinal tema renkleri) */
    --main-25: #f6f1e3;
    --main-600: #ca9a21;
    --neutral-30: #eaeaea;
    --neutral-50: #d5d5d5;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
}

/* ---------- Typography ---------- */
.font-sans       { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.leading-relaxed { line-height: 1.625; }

.text-xs   { font-size: .75rem;  line-height: 1rem; }
.text-sm   { font-size: .875rem; line-height: 1.25rem; }
.text-lg   { font-size: 1.125rem;line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;  line-height: 2rem; }
.text-3xl  { font-size: 1.875rem;line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;    line-height: 1; }

.text-center { text-align: center; }
.text-end    { text-align: right; }

/* Truncation */
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* ---------- Color: text ---------- */
.text-white      { color: #fff; }
.text-brandDark  { color: var(--brandDark); }
.text-brandGold  { color: var(--brandGold); }
.text-main-600   { color: var(--main-600); }
.text-neutral-500{ color: var(--neutral-500); }
.text-neutral-600{ color: var(--neutral-600); }
.text-neutral-700{ color: var(--neutral-700); }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-600   { color: #4b5563; }
.text-gray-700   { color: #374151; }
.text-gray-800   { color: #1f2937; }

/* ---------- Color: bg ---------- */
.bg-white          { background-color: #fff; }
.bg-transparent    { background-color: transparent; }
.bg-brandDark      { background-color: var(--brandDark); }
.bg-brandGold      { background-color: var(--brandGold); }
.bg-brandGray      { background-color: var(--brandGray); }
.bg-main-25        { background-color: var(--main-25); }
.bg-main-600       { background-color: var(--main-600); }
.bg-gray-50        { background-color: #f9fafb; }
.bg-red-600        { background-color: #dc2626; }
.bg-opacity-10     { --tw-bg-opacity: 0.1; }

.hover\:bg-brandGold:hover       { background-color: var(--brandGold); }
.hover\:bg-brandGoldHover:hover  { background-color: var(--brandGoldHover); }

/* ---------- Border ---------- */
.border             { border: 1px solid var(--brandBorder); }
.border-0           { border: 0; }
.border-b           { border-bottom: 1px solid var(--brandBorder); }
.border-b-4         { border-bottom: 4px solid var(--brandGold); }
.border-t           { border-top: 1px solid var(--brandBorder); }
.border-brandBorder { border-color: var(--brandBorder); }
.border-brandGold   { border-color: var(--brandGold); }
.border-gray-300    { border-color: #d1d5db; }
.border-neutral-30  { border-color: var(--neutral-30); }

.rounded         { border-radius: .25rem; }
.rounded-md      { border-radius: .375rem; }
.rounded-lg      { border-radius: .5rem; }
.rounded-xl      { border-radius: .75rem; }
.rounded-8       { border-radius: 8px; }
.rounded-12      { border-radius: 12px; }
.rounded-16      { border-radius: 16px; }
.rounded-full    { border-radius: 9999px; }

.shadow      { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); }
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }

/* ---------- Layout ---------- */
.relative   { position: relative; }
.absolute   { position: absolute; }
.fixed      { position: fixed; }
.sticky     { position: sticky; }
.top-0      { top: 0; }
.bottom-0   { bottom: 0; }
.left-4     { left: 1rem; }
/* Negatif positioning (badge gibi taşma efektleri) */
.-top-1     { top: -.25rem; }
.-right-2   { right: -.5rem; }
.-mt-16     { margin-top: -4rem; }
.z-10       { z-index: 10; }
.z-50       { z-index: 50; }

.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none !important; }

.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.self-center  { align-self: center; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Sizing ---------- */
.w-full     { width: 100%; }
.h-full     { height: 100%; }
.min-h-screen{ min-height: 100vh; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-none { max-width: none; }

/* ---------- Spacing scale (kullanılanlar) ---------- */
/* m */
.m-auto  { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2    { margin-left: .5rem;  margin-right: .5rem; }
.my-4    { margin-top: 1rem;    margin-bottom: 1rem; }

.mt-1    { margin-top: .25rem; }
.mt-2    { margin-top: .5rem; }
.mt-4    { margin-top: 1rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-12   { margin-top: 3rem; }
.mt-16   { margin-top: 4rem; }
.mt-24   { margin-top: 6rem; }
.mt-32   { margin-top: 8rem; }
.mt-auto { margin-top: auto; }

.mb-0    { margin-bottom: 0; }
.mb-1    { margin-bottom: .25rem; }
.mb-2    { margin-bottom: .5rem; }
.mb-3    { margin-bottom: .75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-16   { margin-bottom: 4rem; }
.mb-20   { margin-bottom: 5rem; }
.mb-24   { margin-bottom: 6rem; }

.mr-1    { margin-right: .25rem; }
.mr-1\.5 { margin-right: .375rem; }
.mr-3    { margin-right: .75rem; }
.mr-4    { margin-right: 1rem; }
.ml-2    { margin-left: .5rem; }
.ml-3    { margin-left: .75rem; }

/* p */
.p-3   { padding: .75rem; }
.p-4   { padding: 1rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-12  { padding: 3rem; }
.p-16  { padding: 4rem; }
.p-24  { padding: 6rem; }
.p-32  { padding: 8rem; }

.px-0   { padding-left: 0;       padding-right: 0; }
.px-1\.5{ padding-left: .375rem; padding-right: .375rem; }
.px-3   { padding-left: .75rem;  padding-right: .75rem; }
.px-4   { padding-left: 1rem;    padding-right: 1rem; }
.px-8   { padding-left: 2rem;    padding-right: 2rem; }
.px-24  { padding-left: 6rem;    padding-right: 6rem; }
.px-32  { padding-left: 8rem;    padding-right: 8rem; }

.py-0\.5{ padding-top: .125rem;  padding-bottom: .125rem; }
.py-1\.5{ padding-top: .375rem;  padding-bottom: .375rem; }
.py-2   { padding-top: .5rem;    padding-bottom: .5rem; }
.py-3   { padding-top: .75rem;   padding-bottom: .75rem; }
.py-4   { padding-top: 1rem;     padding-bottom: 1rem; }
.py-5   { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.py-10  { padding-top: 2.5rem;   padding-bottom: 2.5rem; }
.py-12  { padding-top: 3rem;     padding-bottom: 3rem; }
.py-16  { padding-top: 4rem;     padding-bottom: 4rem; }

.pt-2   { padding-top: .5rem; }
.pt-4   { padding-top: 1rem; }
.pt-6   { padding-top: 1.5rem; }
.pt-8   { padding-top: 2rem; }
.pt-16  { padding-top: 4rem; }
.pt-20  { padding-top: 5rem; }
.pt-24  { padding-top: 6rem; }

.pb-0   { padding-bottom: 0; }
.pb-8   { padding-bottom: 2rem; }
.pb-16  { padding-bottom: 4rem; }

/* gap */
.gap-1   { gap: .25rem; }
.gap-2   { gap: .5rem; }
.gap-3   { gap: .75rem; }
.gap-4   { gap: 1rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }
.gap-16  { gap: 4rem; }
.gap-32  { gap: 8rem; }
.gap-x-3 { column-gap: .75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: .25rem; }
.gap-y-2 { row-gap: .5rem; }

/* space-between (sibling spacing) */
.space-y-12 > * + * { margin-top: 3rem; }
.space-y-8  > * + * { margin-top: 2rem; }

/* ---------- Misc utilities ---------- */
.opacity-50           { opacity: .5; }
.cursor-pointer       { cursor: pointer; }
.cursor-not-allowed   { cursor: not-allowed; }
.overflow-hidden      { overflow: hidden; }
.overflow-x-auto      { overflow-x: auto; }
.object-cover         { object-fit: cover; }

/* ---------- Responsive: sm (≥640) md (≥768) lg (≥1024) ---------- */
@media (min-width: 640px) {
    .sm\:flex-row        { flex-direction: row; }
    .sm\:flex-wrap       { flex-wrap: wrap; }
    .sm\:items-center    { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:block           { display: block !important; }
    .sm\:flex            { display: flex !important; }
    .sm\:hidden          { display: none !important; }
    .sm\:space-x-4 > * + * { margin-left: 1rem; }
    .sm\:space-y-0 > *     { margin-top: 0; margin-bottom: 0; }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:hidden      { display: none !important; }
    .md\:block       { display: block !important; }
    .md\:flex        { display: flex !important; }
    .md\:p-10        { padding: 2.5rem; }
    .md\:pt-10       { padding-top: 2.5rem; }
    .md\:py-12       { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:inline      { display: inline !important; }
    .lg\:block       { display: block !important; }
    .lg\:flex        { display: flex !important; }
    .lg\:hidden      { display: none !important; }
}

/* group-hover: parent .group hover'ında child stillenir */
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }