/* ==========================================================================
   Bileşenler — düğmeler, kartlar, formlar, rozetler, uyarılar
   Bootstrap'in varsayılan görünümü kullanılmaz; kendi bileşen katmanımız.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Düğmeler
   -------------------------------------------------------------------------- */

.btn {
    --btn-bg: var(--primary-600);
    --btn-fg: #ffffff;
    --btn-border: transparent;
    --btn-bg-hover: var(--primary-700);
    --btn-shadow: var(--shadow-primary);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.8125rem 1.5rem;
    min-height: 48px;              /* dokunma hedefi en az 44px olmalı */
    border: 1.5px solid var(--btn-border);
    border-radius: var(--radius-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--tracking-snug);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /* Uzun etiketli dugmeler dar ekranda satir kirmalidir; "nowrap" bu tur
       dugmelerin viewport'u asmasina ve sayfada yatay kaydirma olusmasina
       yol acar. Kisa etiketler zaten tek satirda kalir. */
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: background-color var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}

.btn:hover:not(:disabled) {
    background: var(--btn-bg-hover);
    color: var(--btn-fg);
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary {
    --btn-bg: var(--primary-600);
    --btn-bg-hover: var(--primary-700);
    --btn-fg: #ffffff;
}

.btn-accent {
    --btn-bg: var(--accent-600);
    --btn-bg-hover: var(--accent-700);
    --btn-fg: #ffffff;
    --btn-shadow: var(--shadow-accent);
}

.btn-outline {
    --btn-bg: transparent;
    --btn-bg-hover: var(--primary-050);
    --btn-fg: var(--primary-700);
    --btn-border: var(--primary-300);
    --btn-shadow: var(--shadow-sm);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--primary-500);
    color: var(--primary-800);
}

.btn-ghost {
    --btn-bg: transparent;
    --btn-bg-hover: var(--surface-muted);
    --btn-fg: var(--ink-700);
    --btn-border: transparent;
    --btn-shadow: none;
}

.btn-light {
    --btn-bg: #ffffff;
    --btn-bg-hover: var(--surface-sunken);
    --btn-fg: var(--primary-800);
    --btn-shadow: var(--shadow);
}

.btn-on-dark {
    --btn-bg: transparent;
    --btn-bg-hover: rgba(255, 255, 255, 0.12);
    --btn-fg: #ffffff;
    --btn-border: rgba(255, 255, 255, 0.42);
    --btn-shadow: none;
}

.btn-danger {
    --btn-bg: var(--danger-600);
    --btn-bg-hover: #8f1e17;
    --btn-fg: #ffffff;
    --btn-shadow: none;
}

.btn-sm {
    padding: 0.5rem 1rem;
    min-height: 38px;
    font-size: var(--text-sm);
}

.btn-lg {
    padding: 1rem 2rem;
    min-height: 56px;
    font-size: var(--text-lg);
}

.btn-block { width: 100%; }

.btn i, .btn svg { flex-shrink: 0; font-size: 1.1em; }

.btn-group-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Yükleniyor durumu */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--btn-fg);
    animation: ag-spin 0.7s linear infinite;
}

@keyframes ag-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Kartlar
   -------------------------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.card-body { padding: var(--space-6); flex: 1; }
.card-body-lg { padding: var(--space-8); }

.card-title {
    margin-bottom: var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-snug);
}

.card-text {
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--surface-muted);
    overflow: hidden;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.card-hover:hover .card-media img { transform: scale(1.04); }

.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
}

/* Simgeli hizmet/kategori kartı */
.icon-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    height: 100%;
    transition: transform var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}

.icon-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
    color: inherit;
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--primary-050);
    color: var(--primary-600);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.icon-badge-accent {
    background: var(--accent-100);
    color: var(--accent-600);
}

.icon-badge-lg {
    width: 64px;
    height: 64px;
    font-size: 1.85rem;
}

/* --------------------------------------------------------------------------
   Rozetler ve etiketler
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    background: var(--surface-muted);
    color: var(--ink-700);
    white-space: nowrap;
}

.badge-primary { background: var(--primary-100); color: var(--primary-800); }
.badge-accent  { background: var(--accent-100);  color: var(--accent-700); }
.badge-success { background: var(--success-100); color: var(--success-600); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-danger  { background: var(--danger-100);  color: var(--danger-600); }
.badge-info    { background: var(--info-100);    color: var(--info-600); }

.pill-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: all var(--duration-fast) var(--ease-out);
}

.pill-link:hover,
.pill-link.is-active {
    background: var(--primary-050);
    border-color: var(--primary-300);
    color: var(--primary-800);
}

/* --------------------------------------------------------------------------
   Formlar
   -------------------------------------------------------------------------- */

.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink-800);
}

.form-label .required {
    color: var(--danger-600);
    margin-left: 2px;
}

.form-control,
.form-select,
textarea.form-control {
    display: block;
    width: 100%;
    padding: 0.8125rem 1rem;
    min-height: 48px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    appearance: none;
}

.form-control::placeholder { color: var(--ink-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px var(--primary-100);
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 130px;
    resize: vertical;
    line-height: var(--leading-normal);
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234c5a57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.75rem;
}

.form-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Doğrulama — hata yalnızca renkle değil, simge ve metinle de bildirilir. */
.form-control.is-invalid,
.form-select.is-invalid,
.input-validation-error {
    border-color: var(--danger-600);
    background-color: #fffafa;
}

.form-control.is-invalid:focus,
.input-validation-error:focus {
    box-shadow: 0 0 0 4px var(--danger-100);
}

.field-validation-error,
.invalid-feedback {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--danger-600);
}

.field-validation-error::before,
.invalid-feedback::before {
    content: "\26A0";
    flex-shrink: 0;
    line-height: 1.4;
}

.validation-summary-errors {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid var(--danger-600);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--danger-100);
    color: #7f1a14;
}

.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.validation-summary-errors li:last-child { margin-bottom: 0; }
.validation-summary-valid { display: none; }

/* Onay kutusu ve radyo */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.form-check-input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    cursor: pointer;
    appearance: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:checked {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M7.6 14.2 3.9 10.5l1.4-1.4 2.3 2.3 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.5' fill='%23fff'/%3E%3C/svg%3E");
}

.form-check-input:focus-visible {
    outline: 3px solid var(--primary-400);
    outline-offset: 2px;
}

.form-check-label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--ink-700);
    cursor: pointer;
}

.form-check-label a { font-weight: var(--weight-semibold); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Uyarı kutuları
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radius);
    font-size: var(--text-base);
}

.alert p:last-child { margin-bottom: 0; }

.alert-info    { background: var(--info-100);    border-color: var(--info-600);    color: #164a83; }
.alert-success { background: var(--success-100); border-color: var(--success-600); color: #14603b; }
.alert-warning { background: var(--warning-100); border-color: var(--warning-600); color: #6f4806; }
.alert-danger  { background: var(--danger-100);  border-color: var(--danger-600);  color: #7f1a14; }

/* Tıbbi bilgilendirme notu — hizmet ve blog sayfalarında kullanılır */
.medical-disclaimer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.medical-disclaimer .icon-badge {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    background: var(--surface);
}

/* Acil durum uyarısı — asistanda ve gerekli yerlerde */
.emergency-notice {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--danger-100);
    border: 1.5px solid var(--danger-600);
    color: #7f1a14;
    font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   Bildirim (toast)
   -------------------------------------------------------------------------- */

.toast-container {
    position: fixed;
    top: calc(var(--header-height) + var(--space-4));
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: min(400px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary-600);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: ag-toast-in var(--duration) var(--ease-out);
}

.toast.is-success { border-left-color: var(--success-600); }
.toast.is-error   { border-left-color: var(--danger-600); }
.toast.is-warning { border-left-color: var(--warning-600); }

.toast-close {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space-1);
}

@keyframes ag-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   Boş durum ve iskelet
   -------------------------------------------------------------------------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

.empty-state .icon-badge {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    background: var(--surface-muted);
    color: var(--ink-400);
}

.empty-state h3 {
    margin-bottom: 0;
    font-size: var(--text-xl);
    color: var(--ink-700);
}

.skeleton {
    background: linear-gradient(90deg,
        var(--surface-muted) 25%,
        var(--border-subtle) 37%,
        var(--surface-muted) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: ag-shimmer 1.4s ease-in-out infinite;
}

.skeleton-text { height: 14px; margin-bottom: var(--space-2); }
.skeleton-title { height: 24px; width: 60%; margin-bottom: var(--space-3); }
.skeleton-chip { height: 46px; border-radius: var(--radius-full); }

@keyframes ag-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* --------------------------------------------------------------------------
   Sayfalama
   -------------------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
    padding: 0;
    list-style: none;
}

.pagination li { margin: 0; }

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-700);
    font-weight: var(--weight-medium);
    transition: all var(--duration-fast) var(--ease-out);
}

.pagination a:hover {
    border-color: var(--primary-400);
    background: var(--primary-050);
    color: var(--primary-800);
}

.pagination .is-current {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.pagination .is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Kırıntı yolu (breadcrumb)
   -------------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--ink-300);
}

.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary-700); }
.breadcrumb [aria-current="page"] { color: var(--ink-800); font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   Akordeon (SSS)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--border); }

.accordion-item { border-bottom: 1px solid var(--border); }

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) 0;
    border: 0;
    background: none;
    color: var(--ink-900);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-align: left;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}

.accordion-trigger:hover { color: var(--primary-700); }

.accordion-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-050);
    color: var(--primary-600);
    transition: transform var(--duration) var(--ease-out),
                background-color var(--duration) var(--ease-out);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
    background: var(--primary-600);
    color: #fff;
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration) var(--ease-out);
}

.accordion-panel[data-open="true"] { grid-template-rows: 1fr; }

.accordion-panel > div { overflow: hidden; }

.accordion-panel .accordion-content {
    padding-bottom: var(--space-5);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Zengin metin (yönetici içeriği)
   -------------------------------------------------------------------------- */

.prose {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--ink-700);
}

.prose h2 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    font-size: var(--text-2xl);
    color: var(--ink-900);
}

.prose h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--text-xl);
    color: var(--ink-900);
}

.prose > :first-child { margin-top: 0; }

.prose ul, .prose ol { margin-bottom: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-6); }

/* Numaralı şema: görseldeki numaraların açıklaması görselin altında metin
   olarak durur; böylece çevrilir ve ekran okuyucuya okunur. */
.prose figure.sema {
    margin: var(--space-6) 0 var(--space-8);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.prose figure.sema img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.prose figure.sema figcaption {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--ink-600);
}

.prose figure.sema figcaption > strong {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
    color: var(--ink-900);
}

.prose figure.sema ol,
.prose figure.sema ul {
    margin: 0;
    padding-left: var(--space-6);
    columns: 2 16rem;
    column-gap: var(--space-8);
}

.prose figure.sema li {
    margin-bottom: var(--space-2);
    break-inside: avoid;
}

.prose figure.sema ol::marker,
.prose figure.sema ol li::marker {
    font-weight: var(--weight-bold);
    color: var(--primary-600);
}

.prose figure.sema ul.sema-cizgiler {
    margin-top: var(--space-3);
    padding-left: 0;
    list-style: none;
}

.prose table {
    margin-block: var(--space-6);
    font-size: var(--text-base);
}

.prose th, .prose td {
    padding: var(--space-3);
    border: 1px solid var(--border);
    text-align: left;
}

.prose th { background: var(--surface-sunken); font-weight: var(--weight-semibold); }

/* Geniş içerik yatay taşmasın; kendi içinde kaysın. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}